前端Wiki/CSS/基础/盒模型

border 边框

边框由三个属性组成：border-width 粗细、border-style 样式（solid 实线、dashed 虚线、dotted 点线、double 双线）、border-color 颜色。其中 style 是必需的——不写样式，边框默认不显示。

最常用的速记格式是 border: 1px solid #ccc;，顺序可以打乱，三个值会自动归类。也可以只给某一条边设置：border-bottom: 2px solid teal;，常用于导航下划线、卡片底部描边。

一个容易忽略的细节：没有边框的元素，如果用 border: 1px solid transparent;（透明边框）预先占位，悬停时再换成实色，就不会出现「布局抖动」。在 border-box 模式下，这个技巧完全不影响尺寸。

本节要点边框 = 粗细 + 样式 + 颜色，样式必写；速记 border: 1px solid #ccc；单边用 border-bottom 等属性；透明边框可避免悬停抖动。

CSS

<style>
  .item {
    width: 220px; padding: 12px;
    border: 1px solid transparent; /* 占位防抖动 */
    border-bottom: 3px solid #e0e0e0;
  }
  .item:hover {
    border-bottom-color: tomato;   /* 悬停只换颜色 */
    border-color: #9ad0f5;        /* 其余边变蓝 */
  }
  .tag {
    display: inline-block;
    border: 1px dashed orange;
    padding: 2px 8px;
  }
</style>
<div class="item">悬停我看边框变化</div>
<span class="tag">虚线标签</span>

📚 推荐阅读

YY UED 前端规范指南万象云档

优达学城前端样式指南万象云档

移动前端开发经验指南万象云档

Element Plus v2.2 组件库教程万象云档

带你入门前端工程万象云档

来自万象云档的免费在线书籍，点击封面直接阅读