11. 边框border

边框三要素

边框由三个部分组成：样式、宽度、颜色。缺一不可。

.box {
  border-style: solid;   /* 样式：实线 */
  border-width: 2px;     /* 宽度：2像素 */
  border-color: #333;    /* 颜色：深灰 */
}

边框样式 border-style

border-style 决定边框的外观。常用值：

值	效果
solid	实线，最常用
dashed	虚线
dotted	点线
double	双线
none	无边框

.dotted { border-style: dotted; }
.dashed { border-style: dashed; }
.solid  { border-style: solid; }
.double { border-style: double; }
.none   { border-style: none; }

border-style 也可以设置 1-4 个值，规则和 padding 一样：

/* 上 dotted，右 solid，下 dashed，左 double */
.mix { border-style: dotted dashed solid double; }

边框宽度 border-width

边框宽度可以用具体单位，也可以用关键字：

.thin   { border-width: thin;    }  /* 约 1px */
.medium { border-width: medium;  }  /* 约 3px，默认值 */
.thick  { border-width: thick;   }  /* 约 4px */
.px     { border-width: 5px;     }  /* 精确控制 */

边框颜色 border-color

边框颜色支持所有 CSS 颜色表示法：

.red    { border-color: red; }
.hex    { border-color: #3498db; }
.rgb    { border-color: rgb(52, 152, 219); }
.transp { border-color: transparent; }  /* 透明边框 */

transparent 很有用，可以做一个透明边框占位，让元素尺寸保持一致。

简写属性 border

最常用的是 border 简写属性，把三个属性合在一起：

/* border: 宽度 样式 颜色 */
border: 2px solid #333;

顺序可以换，但习惯是”宽度 样式 颜色”。样式必须写，宽度和颜色不写时有默认值。

/* 只写样式，宽度和颜色用默认值 */
border: solid;

/* 写样式和宽度，颜色默认黑色 */
border: solid 3px;

单独设置每条边

有时候只需要一条边框，比如只给盒子加个下划线：

/* 单独设置下边框 */
.border-bottom {
  border-bottom: 1px solid #ddd;
}

/* 单独设置左边框 */
.border-left {
  border-left: 4px solid #3498db;
}

也可以分别控制每条边的样式、宽度、颜色：

.box {
  border-top: 2px solid red;
  border-right: 3px dashed blue;
  border-bottom: 2px solid red;
  border-left: 3px dashed blue;
}

圆角边框 border-radius

border-radius 让边框变成圆角，是 CSS3 的属性：

.box {
  border: 2px solid #3498db;
  border-radius: 8px;
}

值越大，圆角越大。可以用百分比做圆形：

/* 圆形头像 */
.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;  /* 正好是圆形 */
}

也可以单独控制每个角：

.box {
  border-top-left-radius: 10px;      /* 左上角 */
  border-top-right-radius: 20px;     /* 右上角 */
  border-bottom-right-radius: 5px;   /* 右下角 */
  border-bottom-left-radius: 15px;   /* 左下角 */
}

border-radius 也支持简写，规则和 padding 类似：

/* 一个值：四角相同 */
border-radius: 10px;

/* 两个值：左上+右下 / 右上+左下 */
border-radius: 10px 20px;

/* 四个值：左上 / 右上 / 右下 / 左下 */
border-radius: 10px 20px 30px 40px;