Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

这篇文章需要技术复核。如何帮忙。

Summary

CSS的border属性是一个用于设置各种单独的边界属性的简写属性border可以用于设置一个或多个以下属性的值: border-width, border-style, border-color

和所有的简写属性一样,如果有值缺省会被设置成初时值。同时需要注意设置border对border-image属性的影响,虽然border属性不能设置这个属性,但会把该属性重置为初始值none。这使得我们可以用border属性去重置整个样式表中的border设置。因为W3C计划在未来的标准中保留该属性,因此建议使用该属性重置边框设定。

注意: 虽然border-width,、border-styleborder-color 简写属性接受最多4个参数来为不同的边设置宽度、风格和颜色,但boder属性只接受三个参数,分别是宽度、风格和颜色,所以这样会使得四条边的边框相同。

初始值as each of the properties of the shorthand:
适用元素all elements. It also applies to ::first-letter.
是否是继承属性
适用媒体visual
计算值as each of the properties of the shorthand:
是否适用于 CSS 动画as each of the properties of the shorthand:
正规顺序order of appearance in the formal grammar of the values

语法

border: [border-width ||border-style ||border-color |inherit] ;

取值

border-width
请看 border-width.
border-style 
请看 border-style.
border-color 
<color> 可以确定border的颜色。如果这个值没有设置,它的默认值是元素的color属性值(是文字颜色而非背景色)。 请看border-color.

例子

查看在线演示

element { 
    border: 1px solid #000;
}

规范

规范 状态 说明
CSS Backgrounds and Borders Module Level 3
border
Candidate Recommendation 在理论上删除了对transparent的支持,因为<color>已经接受它作为一种有效的颜色值。这不会对实际使用有任何影响。
虽然border不能给border-image赋特定的值,但可以用于重置border-image为初始值(none).
CSS Level 2 (Revision 1)
border
Recommendation

加入inherit关键字。
接受transparent作为有效的颜色值。

CSS Level 1
border
Recommendation  

浏览器兼容性

特性 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本支持 1.0 1.0 (1.7 or earlier) 4.0 3.5 1.0 (85)
特性 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本支持 ? 1.0 (1.9.2) ? ? 1.0

 

另见

文档标签和贡献者

标签: 
 此页面的贡献者: Sebastianz, fscholz, linmx0130, teoli, Zmylxb
 最后编辑者: Sebastianz,