css中的border复合属性

CSS中的border属性是用来设置元素边框样式的。而border还有一个非常便捷的复合属性——border，可以同时设置border-width，border-style，border-color。这篇文章将详细介绍border属性的使用。

{
	border: [border-width] [border-style] [border-color];
}

其中，border-width属性可以设置边框宽度，取值可以是px（像素），em（相对于父元素的宽度），或者是thin、medium、thick等关键字。border-style属性用于设置边框样式，一般取值为solid（实线）、dashed（虚线）、dotted（点状线）等。border-color属性用于设置边框颜色，取值可以是颜色的名称，十六进制数或RGB值。

使用border属性时可以不指定border-width、border-style、border-color其中的某个属性，例如我们只想改变元素的颜色和样式，而不改变原来的边框宽度，则可以这样写：

{
	border: 5px solid red;
	border-color: blue;
}

当然，这样写也可以：

{
	border-style: solid;
	border-color: blue;
}

这样的话，会直接使用原来的边框宽度。如果想要改变祖先元素为绝对定位时，圆角的背景色与边框颜色不一致时，我们可以使用对应的border-radius属性：

{
	border: 5px solid;
	border-radius: 20px;
}

需要注意的是，在border-radius属性上我们无法进行复合设置，即我们无法这样写：

{
	border-radius: 10px 10px 10px 10px;
}

如果我们确实需要修改每个角的半径，则需要分别设置border-top-left-radius、border-top-right-radius、border-bottom-left-radius、border-bottom-right-radius属性。