我们很多人都用过这样的写法:
- .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 是一个简写里还有简写的属性.
来源: http://www.webhek.com/post/border-property-is-kind-of-like-inception.html