你未必知道的CSS小知识：border属性比你想象的要复杂

我们很多人都用过这样的写法：

.example {
  border: solid 1px black;
}

这里的border属性的用法实际上是一种简写的形式，它分别设置了border-style, border-width, 和border-color — 用一句代码表示它们三个。

但不要忘记，border-style, border-width, 和border-color也都有自己的简写形式。所以，border-width可以写成这样：

.example {
  border-width: 2px 5px 1px 0;
}

这样，四个边的宽度被一次设定。border-color 和 border-style 属性也可以这样做。下面的这个实例演示就是用的这种写法：

HTML代码

<div class="box">

CSS代码

body {
  font-family: Arial, sans-serif;
}

.box {
  width: 150px;
  height: 150px;
  margin: 20px auto;
  border-color: peachpuff chartreuse thistle firebrick;
  border-style: solid dashed dotted double;
  border-width: 10px 3px 1px 8px;
}

p {
  text-align: center;
}

演示

其实，这些每个属性还可以继续细化，被拆分成border-left-style, border-top-width, border-bottom-color….

但是，你无法用border的简写分别对四个边设置不同的值，只能分开来设置。所以，border是一个简写里还有简写的属性。