[分享]css中boder的复合属性

CSS中的border属性是用来设置边框的，它可以单独使用，也可以与其他属性组合起来使用。当使用多个属性来设置边框时，我们可以使用border的复合属性，它可以一次性设置多个边框属性。.box{ bo...

CSS中的border属性是用来设置边框的，它可以单独使用，也可以与其他属性组合起来使用。当使用多个属性来设置边框时，我们可以使用border的复合属性，它可以一次性设置多个边框属性。

.box{
 border: 1px solid black; /* 等价于下面三行 */
 border-width: 1px;
 border-style: solid;
 border-color: black;
} 

上面的代码中，我们使用border的复合属性来设置.box元素的边框。其中，1px是边框的宽度，solid是边框的样式，black是边框的颜色。我们也可以只设置其中的某个属性，例如下面的代码就只设置了边框的颜色。

.box{
 border-color: black;
} 

需要注意的是，虽然border的复合属性可以一次性设置多个属性，但需要注意的是其属性的书写顺序。border属性的顺序是：width style color，当我们不设置其中的某个属性时，需要在顺序中留空。例如只设置边框的样式和颜色，代码如下。

.box{
 border: 0px solid black;
} 

以上代码中，0px表示边框的宽度为0，实际上就是没有边框，但在使用border的复合属性时需要设置它。

总结，CSS中的border属性是用来设置边框的，它可以与其他属性组合使用。当使用多个属性来设置边框时，我们可以使用border的复合属性来一次性设置多个属性，但需要注意属性的书写顺序。