炫意html5
最早CSS3和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-colorborder-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是一个简写里还有简写的属性。

炫意HTML5 » 你未必知道的CSS小知识:border属性比你想象的要复杂

Java基础教程Android基础教程