你未必知道的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是一个简写里还有简写的属性。