border在HTML5,你未必知道的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代码

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