mozilla
您的搜索结果

    box-shadow

    摘要

    box-shadow 以逗号分割列表来描述一个或多个阴影效果,可以用到几乎任何元素上。 如果元素同时设置了 border-radius ,阴影也会有圆角效果。多个阴影的z-ordering 和多个 text shadows 规则相同(第一个阴影在最上面)。

    语法

    Formal syntax: none | [inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ] ]#

    取值

    inset
    默认阴影在边框外。
    使用inset后,阴影在边框内(即使是透明边框),背景之上内容之下。
    <offset-x> <offset-y>
    这是头两个 <length> 值,用来设置阴影偏移量。<offset-x> 设置水平偏移量,如果是负值则阴影位于元素左边。 <offset-y> 设置垂直偏移量,如果是负值则阴影位于元素上面。可用单位请查看 <length>
    如果两者都是0,那么阴影位于元素后面。这时如果设置了<blur-radius> 或<spread-radius> 则有模糊效果。
    <blur-radius>
    这是第三个 <length> 值。值越大,糊糊面积越大,阴影就越大越淡。 不能为负值。默认为0,此时阴影边缘锐利。
    <spread-radius>
    这是第四个 <length> 值。取正值时,阴影扩大;取负值时,阴影.收缩。默认为0,此时阴影与元素同样大。
    <color>
    相关事项查看 <color> 。如果没有指定,则由浏览器决定——通常是color的值,不过目前Safari取透明。

    例子

    box-shadow: 60px -16px teal;
    
    box-shadow: 10px 5px 5px black;
    
    box-shadow: 3px 3px red, -1em 0 0.4em olive;
    
    box-shadow: inset 5em 1em gold; 
    
    box-shadow: 0 0 1em gold; 
    
    box-shadow: inset 0 0 1em gold;
    

    规范

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

    浏览器兼容性

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
    Basic support 10.0
    1.0-webkit
    4.0 (2.0)
    3.5 (1.9.1)-moz
    9.0 (See note) 10.5 5.1 (WebKit 534)
    3.0 (WebKit 522)-webkit
    Multiple shadows 10.0
    1.0-webkit
    4.0 (2.0)
    3.5 (1.9.1)-moz
    9.0 10.5 5.1 (WebKit 534)
    3.0 (WebKit 522)-webkit
    inset keyword 10.0
    4.0-webkit
    4.0 (2.0)
    3.5 (1.9.1)-moz
    9.0 10.5 5.1 (WebKit 534)
    5.0 (WebKit 533)-webkit
    Spread radius 10.0
    4.0-webkit
    4.0 (2.0)
    3.5 (1.9.1)-moz
    9.0 10.5 5.1 (WebKit 534)
    5.0 (WebKit 533)-webkit
    Feature iOS Safari Opera Mini Opera Mobile Android Browser
    Basic support

    5.0
    (Yes)-webkit

    ? ? ?
    Multiple shadows 5.0
    (Yes)-webkit
    ? ? ?
    inset keyword 5.0
    (Yes)-webkit
    ? ? ?
    Spread radius 5.0
    (Yes)-webkit
    ? ? ?

    备注

    • Since version 5.5, Internet Explorer supports Microsoft's DropShadow and Shadow Filter. You can use this proprietary extension to cast a drop shadow (though the syntax and the effect are different from CSS3).
    • Shadows affect layout in older Gecko, Presto, and WebKit; e.g. if you cast an outer shadow to a box with a width of 100%, you'll see a scrollbar.
    • Gecko 13 (Firefox 13) removed support for -moz-box-shadow. Since then, only the unprefixed version is supported.
    • In order to get box-shadow in IE9 or later, you need to set border-collapse to separate.

    文档标签和贡献者

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