box-shadow

  • 版本网址缩略名: CSS/box-shadow
  • 版本标题: box-shadow
  • 版本 id: 376145
  • 创建于:
  • 创建者: yan
  • 是否是当前版本?
  • 评论

修订内容

{{ CSSRef() }}

摘要

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

  • {{ Xref_cssinitial() }} {{ Cssxref("none") }}
  • Applies to all elements
  • {{ Xref_cssinherited() }} no
  • Media {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }} as specified (any {{ xref_csslength() }} made absolute; any {{ xref_csscolorvalue() }} computed)

语法

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

取值

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

浏览器兼容性

{{ CompatibilityTable() }}

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

5.0
{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}

{{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
Multiple shadows 5.0
{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}
{{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
inset keyword 5.0
{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}
{{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
Spread radius 5.0
{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}
{{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

备注

  • 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 {{ cssxref("border-collapse") }} to separate.

修订版来源

<p>{{ CSSRef() }}</p>
<h2 id=".E6.91.98.E8.A6.81">摘要</h2>
<p>box-shadow 以逗号分割列表来描述一个或多个阴影效果,可以用到几乎任何元素上。 如果元素同时设置了 {{ cssxref("border-radius") }} ,阴影也会有圆角效果。多个阴影的z-ordering 和多个 <a href="/en/CSS/text-shadow" title="text-shadow">text shadows</a> 规则相同(第一个阴影在最上面)。</p>
<ul class="cssprop">
  <li><dfn>{{ Xref_cssinitial() }}</dfn> {{ Cssxref("none") }}</li>
  <li><dfn>Applies to</dfn> all elements</li>
  <li><dfn>{{ Xref_cssinherited() }}</dfn> no</li>
  <li><dfn>Media</dfn> {{ Xref_cssvisual() }}</li>
  <li><dfn>{{ Xref_csscomputed() }}</dfn> as specified (any {{ xref_csslength() }} made absolute; any {{ xref_csscolorvalue() }} computed)</li>
</ul>
<h2 id=".E8.AF.AD.E6.B3.95">语法</h2>
<pre class="syntaxbox">
<a href="https://developer.mozilla.org/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Formal syntax</a>: none | [inset? &amp;&amp; [ &lt;offset-x&gt; &lt;offset-y&gt; &lt;blur-radius&gt;? &lt;spread-radius&gt;? &lt;color&gt;? ] ]#</pre>
<h3 id="Values" name="Values">取值</h3>
<dl>
  <dt>
    <code>inset</code></dt>
  <dd>
    默认阴影在边框外。<br />
    <code>使用inset后,</code>阴影在边框内(即使是透明边框),背景之上内容之下。</dd>
  <dt>
    <code>&lt;offset-x&gt;</code> <code>&lt;offset-y&gt;</code></dt>
  <dd>
    这是头两个 {{ Xref_csslength }} 值,用来设置阴影偏移量。<code>&lt;offset-x&gt;</code> 设置水平偏移量,如果是负值则阴影位于元素左边。 <code>&lt;offset-y&gt;</code> 设置垂直偏移量,如果是负值则阴影位于元素上面。可用单位请查看 {{ Xref_csslength }} 。</dd>
  <dd>
    如果两者都是0,那么阴影位于元素后面。这时如果设置了<code>&lt;blur-radius&gt;</code> <code>或&lt;spread-radius&gt;</code> 则有模糊效果。</dd>
  <dt>
    <code>&lt;blur-radius&gt;</code></dt>
  <dd>
    这是第三个 {{ Xref_csslength }} 值。值越大,糊糊面积越大,阴影就越大越淡。 不能为负值。默认为0,此时阴影边缘锐利。</dd>
  <dt>
    <code>&lt;spread-radius&gt;</code></dt>
  <dd>
    这是第四个 {{ Xref_csslength }} 值。取正值时,阴影扩大;取负值时,阴影.收缩。默认为0,此时阴影与元素同样大。</dd>
  <dt>
    <code>&lt;color&gt;</code></dt>
  <dd>
    相关事项查看 {{ Xref_csscolorvalue }} 。如果没有指定,则由浏览器决定——通常是{{ cssxref("color") }}的值,不过目前Safari取透明。</dd>
</dl>
<h2 id=".E4.BE.8B.E5.AD.90">例子</h2>
<ul>
  <li><a class="external" href="http://www.elektronotdienst-nuernberg.de/bugs/box-shadow_inset.html" title="http://www.elektronotdienst-nuernberg.de/bugs/box-shadow_inset.html">box-shadow test</a></li>
  <li><a class="external" href="http://markusstange.wordpress.com/2009/02/15/fun-with-box-shadows/" title="http://markusstange.wordpress.com/2009/02/15/fun-with-box-shadows/">box-shadow tutorial and examples</a></li>
</ul>
<pre style="-moz-box-shadow: 60px -16px teal; -webkit-box-shadow: 60px -16px teal; box-shadow: 60px -16px teal; float: left; margin: 1em;">
box-shadow: 60px -16px teal;
</pre>
<pre style="-moz-box-shadow: 10px 5px 5px black; -webkit-box-shadow: 10px 5px 5px black; box-shadow: 10px 5px 5px black; float: left; margin: 1em;">
box-shadow: 10px 5px 5px black;
</pre>
<pre style="-moz-box-shadow: 3px 3px red, -1em 0pt 0.4em olive; -webkit-box-shadow: 3px 3px red, -1em 0 0.4em olive; box-shadow: 3px 3px red, -1em 0 0.4em olive; float: left; margin: 1em;">
box-shadow: 3px 3px red, -1em 0 0.4em olive;
</pre>
<pre style="-moz-box-shadow: 5em 1em gold inset; -webkit-box-shadow: inset 5em 1em gold; box-shadow: inset 5em 1em gold; float: left; margin: 1em;">
box-shadow: inset 5em 1em gold; 
</pre>
<pre style="-moz-box-shadow: 0pt 0pt 1em gold; -webkit-box-shadow: 0 0 1em gold; box-shadow: 0 0 1em gold; float: left; margin: 1em;">
box-shadow: 0 0 1em gold; 
</pre>
<pre style="-moz-box-shadow: 0pt 0pt 1em gold inset; -webkit-box-shadow: inset 0 0 1em gold; box-shadow: inset 0 0 1em gold; float: left; margin: 1em;">
box-shadow: inset 0 0 1em gold;
</pre>
<h2 class="cleared" id=".E8.A7.84.E8.8C.83">规范</h2>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Specification</th>
      <th scope="col">Status</th>
      <th scope="col">Comment</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{ SpecName('CSS3 Backgrounds', '#box-shadow', 'box-shadow') }}</td>
      <td>{{ Spec2('CSS3 Backgrounds') }}</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<h2 id=".E6.B5.8F.E8.A7.88.E5.99.A8.E5.85.BC.E5.AE.B9.E6.80.A7">浏览器兼容性</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>10.0<br />
          1.0{{ property_prefix("-webkit") }}</td>
        <td>{{ CompatGeckoDesktop("2.0") }}<br />
          {{ CompatGeckoDesktop("1.9.1") }}{{ property_prefix("-moz") }}</td>
        <td>9.0 (See note)</td>
        <td>10.5</td>
        <td>5.1 (WebKit 534)<br />
          3.0 (WebKit 522){{ property_prefix("-webkit") }}</td>
      </tr>
      <tr>
        <td>Multiple shadows</td>
        <td>10.0<br />
          1.0{{ property_prefix("-webkit") }}</td>
        <td>{{ CompatGeckoDesktop("2.0") }}<br />
          {{ CompatGeckoDesktop("1.9.1") }}{{ property_prefix("-moz") }}</td>
        <td>9.0</td>
        <td>10.5</td>
        <td>5.1 (WebKit 534)<br />
          3.0 (WebKit 522){{ property_prefix("-webkit") }}</td>
      </tr>
      <tr>
        <td><code>inset</code> keyword</td>
        <td>10.0<br />
          4.0{{ property_prefix("-webkit") }}</td>
        <td>{{ CompatGeckoDesktop("2.0") }}<br />
          {{ CompatGeckoDesktop("1.9.1") }}{{ property_prefix("-moz") }}</td>
        <td>9.0</td>
        <td>10.5</td>
        <td>5.1 (WebKit 534)<br />
          5.0 (WebKit 533){{ property_prefix("-webkit") }}</td>
      </tr>
      <tr>
        <td>Spread radius</td>
        <td>10.0<br />
          4.0{{ property_prefix("-webkit") }}</td>
        <td>{{ CompatGeckoDesktop("2.0") }}<br />
          {{ CompatGeckoDesktop("1.9.1") }}{{ property_prefix("-moz") }}</td>
        <td>9.0</td>
        <td>10.5</td>
        <td>5.1 (WebKit 534)<br />
          5.0 (WebKit 533){{ property_prefix("-webkit") }}</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>iOS Safari</th>
        <th>Opera Mini</th>
        <th>Opera Mobile</th>
        <th>Android Browser</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>
          <p>5.0<br />
            {{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}</p>
        </td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td>Multiple shadows</td>
        <td>5.0<br />
          {{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>inset</code> keyword</td>
        <td>5.0<br />
          {{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td>Spread radius</td>
        <td>5.0<br />
          {{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<h3 id=".E5.A4.87.E6.B3.A8">备注</h3>
<ul>
  <li>Since version 5.5, Internet Explorer supports Microsoft's <a class="external" href="http://msdn.microsoft.com/en-us/library/ms532985%28VS.85,loband%29.aspx" title="http://msdn.microsoft.com/en-us/library/ms532985(VS.85,loband).aspx">DropShadow</a> and <a class="external" href="http://msdn.microsoft.com/en-us/library/ms533086%28VS.85,loband%29.aspx" title="http://msdn.microsoft.com/en-us/library/ms533086(VS.85,loband).aspx">Shadow</a> Filter. You can use this proprietary extension to cast a drop shadow (though the syntax and the effect are different from CSS3).</li>
  <li>Shadows affect layout in older Gecko, Presto, and WebKit; e.g. if you cast an outer shadow to a box with a <code>width</code> of <code>100%</code>, you'll see a scrollbar.</li>
  <li>Gecko 13 (Firefox 13) removed support for <code>-moz-box-shadow</code>. Since then, only the unprefixed version is supported.</li>
  <li>In order to get <code>box-shadow</code> in IE9 or later, you need to set {{ cssxref("border-collapse") }} to <code>separate</code>.</li>
</ul>
恢复到这个版本