CSS Border(边框)

边框是盒子模型中最"显眼"的一层：它能给元素描边、画分隔线、做卡片与按钮的外形。CSS 通过 border 系列属性把边框的宽度、样式和颜色拆开管理，学习成本低、出效果快，是页面美化的第一把工具。

边框的三要素

边框由三个要素构成：border-width（宽度）、border-style（样式）、border-color（颜色）。要注意：样式默认是 none，必须先设置样式，边框才会显示出来。

p {
  border-style: solid;      /* 样式：实线（必须先写） */
  border-width: 2px;        /* 宽度：2 像素 */
  border-color: #e53935;    /* 颜色：红色 */
}
/* 效果：p 元素四周出现 2px 宽的红色实线边框 */

border-style 常用样式

样式决定边框长什么样，取值很多：none 无、hidden 隐藏、dotted 点状、dashed 虚线、solid 实线、double 双线，以及 groove/ridge/inset/outset 四种立体浮雕效果：

.b1 { border-style: dotted; }   /* 点状边框 */
.b2 { border-style: dashed; }   /* 虚线边框 */
.b3 { border-style: double; }   /* 双实线边框 */
/* 效果：三个盒子分别呈现点线、虚线、双线外观 */

简写属性 border

把三要素合并成一行：border: 宽度 样式 颜色;，顺序可以灵活，但样式一般不可省略：

div {
  border: 3px solid #42a5f5;   /* 四边统一 3px 蓝色实线 */
}
/* 等效写法：border-width:3px; border-style:solid; border-color:#42a5f5; */

单独设置某一边

想只给某条边加线（如列表的分隔线），可用 border-top、border-right、border-bottom、border-left，每个方向也支持各自的简写与三要素拆分：

p {
  border-bottom: 2px solid #ccc;   /* 只保留底部 2px 灰色实线 */
}
/* 效果：段落底部出现一条灰色分隔线，其余三边无线 */

圆角边框 border-radius

圆角不属于边框三要素，却能给边框和背景"磨圆"，是做按钮、标签、头像的关键属性：

button {
  border: none;               /* 先去掉默认边框 */
  border-radius: 8px;         /* 四个角统一圆 8px */
  background: #26a69a;
  padding: 8px 20px;
}
/* 效果：绿色圆角按钮 */
.circle { border-radius: 50%; }  /* 长宽相等的元素会变成圆形 */

小结

边框由宽度、样式、颜色三要素组成，必须先把 border-style 从 none 改掉才能看见线；善用 border 简写、border-bottom 单边设置和 border-radius 圆角，就能快速做出分隔线、按钮与卡片造型。