text-shadow

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

修订内容

{{ Cssref }}

Summary

text-shadow 为文字添加阴影。可以为文字与 {{ cssxref("text-decoration","text-decorations") }} 添加多个阴影,阴影值之间用逗号隔开。

每个阴影指定相对文字的偏移量,可选的颜色及模糊半径。

多个阴影从前往后叠加,第一个阴影在前面。

{{cssbox("text-shadow")}}

Syntax

Formal grammar: none | [<shadow>,]* <shadow>

                where <shadow> is: [ <color>? <offset-x> <offset-y> <blur-radius>? | <offset-x> <offset-y> <blur-radius>? <color>? ]

Values

<color>
可选。位于偏移量前面或后面。如果没有指定颜色,则UA(用户代理)自行选择。{{ 注意("如果想让各浏览器保持一致,则应指定颜色。") }}
<offset-x> <offset-y>
必选。长度值指定阴影相对文字的偏移量。<offset-x> 指定水平偏移量,若是负值则阴影位于文字左边。 <offset-y> 指定垂直偏移量,若是负值则阴影位于文字上面。如果两者均为0,则阴影位于文字后面(如果设定了<blur-radius>则会有模糊效果)。
单位查看 {{ Xref_csslength }}
<blur-radius>
可选。这是 {{ Xref_csslength }} 值。如果没有指定则为0。值越大,模糊半径越大,阴影也就越大越淡。

Examples

text-shadow: orange 0 -2px;

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue;
color: white;
font: 1.5em Georgia, "Bitstream Charter", "URW Bookman L", "Century Schoolbook L", serif;

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

text-shadow: rgba(0,0,0,0.1) -1px 0, rgba(0,0,0,0.1) 0 -1px,
             rgba(255,255,255,0.1) 1px 0, rgba(255,255,255,0.1) 0 1px,
             rgba(0,0,0,0.1) -1px -1px, rgba(255,255,255,0.1) 1px 1px; 
color: gold;
background: gold;

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Specifications

Specification Status Comment
{{ SpecName('CSS3 Transitions', '#animatable-css', 'text-shadow') }} {{ Spec2('CSS3 Transitions') }} Lists text-shadow as animatable.
{{ SpecName('CSS3 Text-decoration', '#text-shadow', 'text-shadow') }} {{ Spec2('CSS3 Text-decoration') }}  

The CSS property text-shadow was improperly defined in CSS2 and dropped in CSS2 (Level 1). The CSS Text Module Level 3 spec improved and precised the syntax. Later it was moved to new working draft CSS Text Decoration Module Level 3.

Browser compatibility

{{ CompatibilityTable }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 2.0.158.0 {{ CompatGeckoDesktop("1.9.1") }} 10 9.5 1.1 (100)
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{ CompatUnknown }} {{ CompatUnknown }} {{ CompatUnknown }} {{ CompatUnknown }} {{ CompatUnknown }}
  • Gecko (Firefox) theoretically supports infinite text-shadows (don't try it).
    Gecko 2 and later cap the blur radius at 300 for performance reasons.
    If the <color> value is unspecified, then Gecko uses the value of the element's {{ cssxref("color") }} property.
  • Opera supports a maximum of 6-9 text-shadows for performance reasons. The blur radius is limited to 100px.
    Opera 9.5-10.1 adheres to the old, reverse painting order (CSS2, the first specified shadow is on the bottom).
  • Internet Explorer 5.5 supports Microsoft's Shadow and DropShadow Filter.
  • Safari: Any shadows that do not explicitly specify a color are transparent.
    Safari 1.1-3.2 only supports one text-shadow (displays the first shadow of a comma-separated list and ignores the rest).
    Safari 4.0 (WebKit 528) and later support multiple text-shadows.
  • Konqueror supports text-shadow starting with version 3.4.

See also

  • {{ cssxref("box-shadow") }}

修订版来源

<div>
  {{ Cssref }}</div>
<h2 id="Summary" name="Summary">Summary</h2>
<p><code>text-shadow </code>为文字添加阴影。可以为文字与 {{ cssxref("text-decoration","text-decorations") }} 添加多个阴影,阴影值之间用逗号隔开。</p>
<p>每个阴影指定相对文字的偏移量,可选的颜色及模糊半径。</p>
<p>多个阴影从前往后叠加,第一个阴影在前面。</p>
<p>{{cssbox("text-shadow")}}</p>
<h2 id="Syntax" name="Syntax">Syntax</h2>
<pre class="syntaxbox">
Formal grammar: none | [&lt;shadow&gt;,]* &lt;shadow&gt;

                where &lt;shadow&gt; is: [ &lt;color&gt;? &lt;offset-x&gt; &lt;offset-y&gt; &lt;blur-radius&gt;? | &lt;offset-x&gt; &lt;offset-y&gt; &lt;blur-radius&gt;? &lt;color&gt;? ]</pre>
<h3 id="Values" name="Values">Values</h3>
<dl>
  <dt>
    &lt;color&gt;</dt>
  <dd>
    可选。位于偏移量前面或后面。如果没有指定颜色,则UA(用户代理)自行选择。{{ 注意("如果想让各浏览器保持一致,则应指定颜色。") }}</dd>
  <dt>
    &lt;offset-x&gt; &lt;offset-y&gt;</dt>
  <dd>
    必选。长度值指定阴影相对文字的偏移量。<code>&lt;offset-x&gt;</code> 指定水平偏移量,若是负值则阴影位于文字左边。 <code>&lt;offset-y&gt;</code> 指定垂直偏移量,若是负值则阴影位于文字上面。如果两者均为0,则阴影位于文字后面(如果设定了<code>&lt;blur-radius&gt;则会有模糊效果</code>)。<br />
    单位查看 {{ Xref_csslength }}</dd>
  <dt>
    &lt;blur-radius&gt;</dt>
  <dd>
    可选。这是 {{ Xref_csslength }} 值。如果没有指定则为0。值越大,模糊半径越大,阴影也就越大越淡。</dd>
</dl>
<h2 id="Examples" name="Examples">Examples</h2>
<pre class="brush: css">
text-shadow: orange 0 -2px;
</pre>
<p style="text-shadow:orange 0 -2px">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
<pre class="brush:css">
text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue;
color: white;
font: 1.5em Georgia, "Bitstream Charter", "URW Bookman L", "Century Schoolbook L", serif;</pre>
<p style="text-shadow:1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue; color:white; font:1.5em Georgia,'Bitstream Charter','URW Bookman L','Century Schoolbook L', serif">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, <u>totam rem aperiam</u>, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
<pre class="brush:css">
text-shadow: rgba(0,0,0,0.1) -1px 0, rgba(0,0,0,0.1) 0 -1px,
             rgba(255,255,255,0.1) 1px 0, rgba(255,255,255,0.1) 0 1px,
             rgba(0,0,0,0.1) -1px -1px, rgba(255,255,255,0.1) 1px 1px; 
color: gold;
background: gold;</pre>
<p style="text-shadow: rgba(0,0,0,0.1) -1px 0, rgba(0,0,0,0.1) 0 -1px, rgba(255,255,255,0.1) 1px 0, rgba(255,255,255,0.1) 0 1px, rgba(0,0,0,0.1) -1px -1px, rgba(255,255,255,0.1) 1px 1px; color:gold; background:gold">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, <u>totam rem aperiam</u>, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
<h2 id="Specifications" name="Specifications">Specifications</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 Transitions', '#animatable-css', 'text-shadow') }}</td>
      <td>{{ Spec2('CSS3 Transitions') }}</td>
      <td>Lists <code>text-shadow</code> as animatable.</td>
    </tr>
    <tr>
      <td>{{ SpecName('CSS3 Text-decoration', '#text-shadow', 'text-shadow') }}</td>
      <td>{{ Spec2('CSS3 Text-decoration') }}</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<p>The CSS property <code>text-shadow</code> was <a class="external" href="http://www.w3.org/TR/2008/REC-CSS2-20080411/text.html#text-shadow-props" title="http://www.w3.org/TR/2008/REC-CSS2-20080411/text.html#text-shadow-props">improperly defined in CSS2</a> and dropped in CSS2 (Level 1). The<em> CSS Text Module Level 3 </em>spec improved and precised the syntax. Later it was moved to new working draft <em><a href="http://www.w3.org/TR/2012/WD-css-text-decor-3-20121113/" title="http://www.w3.org/TR/2012/WD-css-text-decor-3-20121113/">CSS Text Decoration Module Level 3</a></em>.</p>
<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</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 (WebKit)</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>2.0.158.0</td>
        <td>{{ CompatGeckoDesktop("1.9.1") }}</td>
        <td>10</td>
        <td>9.5</td>
        <td>1.1 (100)</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Phone</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{ CompatUnknown }}</td>
        <td>{{ CompatUnknown }}</td>
        <td>{{ CompatUnknown }}</td>
        <td>{{ CompatUnknown }}</td>
        <td>{{ CompatUnknown }}</td>
      </tr>
    </tbody>
  </table>
</div>
<ul>
  <li><strong>Gecko</strong> (Firefox) theoretically supports infinite text-shadows (don't try it).<br />
    <strong>Gecko 2</strong>&nbsp;and later cap the blur radius at 300 for performance reasons.<br />
    If the &lt;color&gt; value is unspecified, then <strong>Gecko</strong> uses the value of the element's {{ cssxref("color") }} property.</li>
  <li><strong>Opera</strong> supports a maximum of 6-9 text-shadows for performance reasons. The blur radius is limited to 100px.<br />
    <strong>Opera 9.5-10.1</strong> adheres to the old, reverse painting order (CSS2, the first specified shadow is on the <em>bottom</em>).</li>
  <li><strong>Internet Explorer 5.5</strong> supports Microsoft's <a class="external" href="http://msdn.microsoft.com/en-us/library/ms673539(loband).aspx" title="http://msdn.microsoft.com/en-us/library/ms673539(loband).aspx"><em>Shadow</em> and <em>DropShadow</em> Filter</a>.</li>
  <li><strong>Safari: </strong>Any shadows that do not explicitly specify a color are transparent.<br />
    <strong>Safari 1.1-3.2</strong> only supports one text-shadow (displays the first shadow of a comma-separated list and ignores the rest).<br />
    <strong>Safari 4.0</strong> (WebKit 528) and later support multiple text-shadows.</li>
  <li><strong>Konqueror</strong> supports text-shadow starting with version 3.4.</li>
</ul>
<h2 id="See_also" name="See_also">See also</h2>
<ul>
  <li>{{ cssxref("box-shadow") }}</li>
</ul>
恢复到这个版本