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

阅读余下内容
 

发表评论

电子邮件地址不会被公开。 必填项已用*标注


京ICP备12002735号