aboutsummaryrefslogtreecommitdiff
path: root/files/zh-cn/web/css/text-shadow/index.html
diff options
context:
space:
mode:
authorPeter Bengtsson <mail@peterbe.com>2020-12-08 14:40:17 -0500
committerPeter Bengtsson <mail@peterbe.com>2020-12-08 14:40:17 -0500
commit33058f2b292b3a581333bdfb21b8f671898c5060 (patch)
tree51c3e392513ec574331b2d3f85c394445ea803c6 /files/zh-cn/web/css/text-shadow/index.html
parent8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff)
downloadtranslated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz
translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2
translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip
initial commit
Diffstat (limited to 'files/zh-cn/web/css/text-shadow/index.html')
-rw-r--r--files/zh-cn/web/css/text-shadow/index.html160
1 files changed, 160 insertions, 0 deletions
diff --git a/files/zh-cn/web/css/text-shadow/index.html b/files/zh-cn/web/css/text-shadow/index.html
new file mode 100644
index 0000000000..3d0ce10c68
--- /dev/null
+++ b/files/zh-cn/web/css/text-shadow/index.html
@@ -0,0 +1,160 @@
+---
+title: text-shadow
+slug: Web/CSS/text-shadow
+tags:
+ - CSS
+ - CSS Styles
+ - CSS Text Decoration
+translation_of: Web/CSS/text-shadow
+---
+<div>{{CSSRef}}</div>
+
+<p><code><strong>text-shadow</strong></code>为文字添加阴影。可以为文字与  {{ cssxref("text-decoration","text-decorations") }}  添加多个阴影,阴影值之间用逗号隔开。每个阴影值由元素在X和Y方向的偏移量、模糊半径和颜色值组成。</p>
+
+<p>{{EmbedInteractiveExample("pages/css/text-shadow.html")}}</p>
+
+<h2 id="Syntax" name="Syntax">语法</h2>
+
+<pre class="brush: css">/* offset-x | offset-y | blur-radius | color */
+text-shadow: 1px 1px 2px black;
+
+/* color | offset-x | offset-y | blur-radius */
+text-shadow: #fc0 1px 0 10px;
+
+/* offset-x | offset-y | color */
+text-shadow: 5px 5px #558abb;
+
+/* color | offset-x | offset-y */
+text-shadow: white 2px 5px;
+
+/* offset-x | offset-y
+/* Use defaults for color and blur-radius */
+text-shadow: 5px 10px;
+
+/* Global values */
+text-shadow: inherit;
+text-shadow: initial;
+text-shadow: unset;</pre>
+
+<p>当阴影大于一个时要用逗号区别开阴影之间的参数</p>
+
+<p>每个阴影都有两到三个<code>&lt;length&gt;</code>参数 , 以及一个与阴影颜色相关的<code>&lt;color&gt;</code>参数 。 前两个<code>&lt;length&gt;</code>参数,是以“文字中心”为原点的坐标轴,分别为x轴 <code>&lt;offset-x&gt;</code> 和y轴 <code>&lt;offset-y&gt;</code> 的值; 如果有第三个<code>&lt;length&gt;</code>参数,则第三个数值为形成阴影效果的半径的数值 <code>&lt;blur-radius&gt;</code> 。</p>
+
+<p>当所给的阴影大于一个时,阴影应用的顺序为从前到后, 第一个指定的阴影在顶部.</p>
+
+<p>这个属性同时适用于{{cssxref("::first-line")}} 以及 {{cssxref("::first-letter")}} <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements">伪元素</a>.</p>
+
+<h3 id="Values" name="Values">取值</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;color&gt;")}}</dt>
+ <dd>可选。可以在偏移量之前或之后指定。如果没有指定颜色,则使用UA(用户代理)自行选择的颜色。 {{ note("如果想确保跨浏览器的一致性,请明确地指定一种颜色") }}</dd>
+ <dt><code>&lt;offset-x&gt; &lt;offset-y&gt;</code></dt>
+ <dd>必选。这些长度值指定阴影相对文字的偏移量。<code>&lt;offset-x&gt;</code> 指定水平偏移量,若是负值则阴影位于文字左边。 <code>&lt;offset-y&gt;</code> 指定垂直偏移量,若是负值则阴影位于文字上面。如果两者均为0,则阴影位于文字正后方(如果设置了<code>&lt;blur-radius&gt; </code>则会产生模糊效果)。<br>
+ 可用单位请查看 {{ cssxref("&lt;length&gt;") }}。</dd>
+ <dt><code>&lt;blur-radius&gt;</code></dt>
+ <dd>可选。这是 {{ cssxref("&lt;length&gt;") }} 值。如果没有指定,则默认为0。值越大,模糊半径越大,阴影也就越大越淡(wider and lighter)。</dd>
+</dl>
+
+<h3 id="形式化语法">形式化语法</h3>
+
+<pre>{{csssyntax("text-shadow")}}</pre>
+
+<h2 id="Examples" name="Examples">例子</h2>
+
+<h3 id="简单的阴影">简单的阴影</h3>
+
+<div id="Example1" style="margin: 0px; padding: 0px; border: 0px; color: rgb(77, 78, 83); font-family: 'Open Sans', Arial, sans-serif; font-size: 14px; line-height: 21px; background-color: rgb(255, 255, 255);">
+<pre>.red-text-shadow {
+ text-shadow: red 0 -2px;
+}</pre>
+
+<div class="line-number" style="margin: 1em 0px 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 0px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin: 1em 0px 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 19px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin: 1em 0px 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 38px; background: 0px 0px;"></div>
+
+<pre>&lt;p class="red-text-shadow"&gt;
+ 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.
+&lt;/p&gt;</pre>
+
+<div class="line-number" style="margin: 1em 0px 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 0px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin: 1em 0px 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 19px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin: 1em 0px 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 38px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin: 1em 0px 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 57px; background: 0px 0px;"></div>
+</div>
+
+<p>{{EmbedLiveSample('Simple_shadow', '689px', '90px')}}</p>
+
+<h3 id="多重阴影">多重阴影</h3>
+
+<div id="Example2">
+<pre>.white-with-blue-shadow {
+ 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>
+
+<pre>&lt;p class="white-with-blue-shadow"&gt;
+ 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.
+&lt;/p&gt;
+</pre>
+
+<div></div>
+</div>
+
+<p>{{EmbedLiveSample('Multiple_shadows', '689px', '180px')}}</p>
+
+<h2 id="规范">规范</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>Specifies <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>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">improperly defined in CSS2</a> and dropped in CSS2 (Level 1). The CSS Text Module Level 3 spec refined the syntax. Later it was moved to <a href="https://www.w3.org/TR/css-text-decor-3/">CSS Text Decoration Module Level 3</a>.</td>
+ </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2>
+
+<p>{{Compat("css.properties.text-shadow")}}</p>
+
+<h2 id="See_also" name="See_also">参见</h2>
+
+<ul>
+ <li><a href="https://cssgenerator.org/text-shadow-css-generator.html">Text Shadow CSS Generator</a> - An interactive text shadow CSS generator.</li>
+ <li>{{cssxref("box-shadow")}}</li>
+ <li>The {{cssxref("&lt;color&gt;")}} data type (for specifying the shadow color)</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Applying_color">Applying color to HTML elements using CSS</a></li>
+</ul>
+
+<p>
+ <audio style="display: none;"></audio>
+</p>
+
+<p>
+ <audio style="display: none;"></audio>
+</p>