mozilla
您的搜索结果

    border

    这篇文章需要技术审查。

    翻译正在进行中。

    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属性只接受三个参数,分别是宽度、风格和颜色,所以这样会使得四条边的边框相同。

    • 初始值 the concatenation of the initial values of its longhand properties:
      • border-width: the concatenation of the initial values of its longhand properties:
        • border-top-width: medium
        • border-right-width: medium
        • border-bottom-width: medium
        • border-left-width: medium
      • border-style: the concatenation of the initial values of its longhand properties:
        • border-top-style: none
        • border-right-style: none
        • border-bottom-style: none
        • border-left-style: none
      • border-color: the concatenation of the initial values of its longhand properties:
        • border-top-color: currentColor
        • border-right-color: currentColor
        • border-bottom-color: currentColor
        • border-left-color: currentColor
    • 适用元素 all elements. It also applies to ::first-letter.
    • 可继承 no
    • 适用媒体 visual
    • 计算值 as each of the properties of the shorthand:
      • border-width: as each of the properties of the shorthand:
      • border-style: as each of the properties of the shorthand:
        • border-bottom-style: as specified
        • border-left-style: as specified
        • border-right-style: as specified
        • border-top-style: as specified
      • border-color: as each of the properties of the shorthand:
        • border-bottom-color: If the value is translucent, the computed value will be the rgba() corresponding one. If it isn't, it will be the rgb() corresponding one. The transparent keyword maps to rgba(0,0,0,0).
        • border-left-color: If the value is translucent, the computed value will be the rgba() corresponding one. If it isn't, it will be the rgb() corresponding one. The transparent keyword maps to rgba(0,0,0,0).
        • border-right-color: If the value is translucent, the computed value will be the rgba() corresponding one. If it isn't, it will be the rgb() corresponding one. The transparent keyword maps to rgba(0,0,0,0).
        • border-top-color: If the value is translucent, the computed value will be the rgba() corresponding one. If it isn't, it will be the rgb() corresponding one. The transparent keyword maps to rgba(0,0,0,0).
    • 可动画 as each of the properties of the shorthand:
      • border-color: as each of the properties of the shorthand:
        • border-bottom-color: yes, as a color
        • border-left-color: yes, as a color
        • border-right-color: yes, as a color
        • border-top-color: yes, as a color
      • border-style: no
      • border-width: as each of the properties of the shorthand:
        • border-bottom-width: yes, as a length
        • border-left-width: yes, as a length
        • border-right-width: yes, as a length
        • border-top-width: yes, as a length
    • Canonical order 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

     

    另见

    文档标签和贡献者

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