CSS border属性是用于设置元素一个元素上右下左四条边框的宽度,颜色和线条样式的简写属性。
border
属性可以同时设置一个元素的border-width属性、border-style属性和border-color属性。
虽然border-width、border-style和border-color属性可以接收4个值来分别设置元素边框的宽度,线条样式和颜色,但是border
属性只能接收3个参数,分别是元素边框的宽度,颜色和线条样式,所以使用border
属性来设置元素边框会使得元素的四条边框相同。
和所有的CSS简写属性一样,如果border
属性有值缺省会被设置成初时值。同时需要注意设置border
属性对border-image属性的影响,虽然border属性不能设置这个属性,但会把该属性重置为初始值none。这使得我们可以用border
属性去重置整个样式表中的border设置。因为W3C计划在未来的标准中保留该属性,因此建议使用该属性重置边框设定。
border
属性可以接收一个,两个或三个参数作为值。没有设置的缺省值会被设置为它们的初始值。
官方语法
border: <line-width> || <line-style> || <color>
参数:
<line-width>
:元素边框的宽度。详细信息可以参考border-width属性。<line-style>
:元素边框的线条样式。详细信息可以参考border-style属性。<color>
:元素边框的颜色。详细信息可以参考border-color属性。
border
属性的初始值为:0 none currentColor
。
应用范围
border
属性可以应用在所有的元素上。
示例代码
下面是一些border
属性合法取值的示例代码:
/* 边框的颜色和样式设置为初始值 */ border: 1em; /* 宽度为初始值0,元素边框不可见 */ border: solid teal; /* 1个像素灰色dotted样式的边框*/ border: 1px dotted #eee; /* 5像素橙色实线边框 */ border: 5px solid orange;
在线演示
下面的例子为元素设置10像素粉红色的虚线边框。
.container{ width: 700px; height: 350px; border: 10px dashed #d2527f; }
border: 10px dashed #d2527f;
浏览器支持
所有的现代浏览器都支持border-bottom
属性,包括Chrome,Firefox,Safari,Opera,IE 以及 Android 和 iOS。