mozilla
您的搜索结果

    background-clip

    Summary

    background-clip  设置元素的背景(背景图片或颜色)是否延伸到边框下面。

    如果没有背景图片,那么只有在边框设置为透明或半透明时才能看到视觉效果。

    • 初始值 border-box
    • 适用元素 all elements
    • 可继承 no
    • 适用媒体 visual
    • 计算值 as specified
    • 可动画
    • Canonical order the unique non-ambiguous order defined by the formal grammar

    Syntax

    Formal syntax: <box>#
    background-clip: border-box
    background-clip: padding-box
    background-clip: content-box
    
    background-clip: inherit
    

    Values

    border-box
    背景延伸到边框外沿。
    padding-box
    背景延伸到内边距外沿。
    content-box
    背景裁剪到内容区外沿。

    Examples

     pre {
       border: 5px navy;
       border-style: dotted double;
       background: #F8D575;
       /* The yellow background will not go behind the border */
       background-clip: padding-box;
     }
    

    Specifications

    Specification Status Comment
    CSS Backgrounds and Borders Module Level 3 Candidate Recommendation  

    Browser compatibility

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
    Basic support 1.0 [3] 4.0 (2.0) [1] 9.0 [2] 10.5 3.0 (522) [3]
    content-box 1.0 [3] 4.0 (2.0) [1] 9.0 [2] 12.0 (maybe earlier) 3.0 (522) [3]
    Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
    Basic support ? ? ? ? ?
    content-box ? ? ? ? ?

    [1] Gecko supported, from version 1.1 to version 1.9.2, which corresponds to Firefox 1.0 to 3.6 included, a different, and prefixed, syntax: -moz-background-clip: padding | border.

    [2] Internet Explorer 7, but not other versions of Internet Explorer,behaves like background-clip:padding if overflow: hidden | auto | scroll.

    [3] Webkit also supports the prefixed version of this property, and in that case, in addition to the current keywords, the alternative synonyms are: padding, border, and content.

    [4] Konqueror 3.5.4 supports -khtml-background-clip.

    See also

    文档标签和贡献者

    此页面的贡献者有: yan, teoli
    最后编辑者: teoli,