diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
commit | 33058f2b292b3a581333bdfb21b8f671898c5060 (patch) | |
tree | 51c3e392513ec574331b2d3f85c394445ea803c6 /files/zh-cn/web/css/text-shadow/index.html | |
parent | 8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff) | |
download | translated-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.html | 160 |
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><length></code>参数 , 以及一个与阴影颜色相关的<code><color></code>参数 。 前两个<code><length></code>参数,是以“文字中心”为原点的坐标轴,分别为x轴 <code><offset-x></code> 和y轴 <code><offset-y></code> 的值; 如果有第三个<code><length></code>参数,则第三个数值为形成阴影效果的半径的数值 <code><blur-radius></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("<color>")}}</dt> + <dd>可选。可以在偏移量之前或之后指定。如果没有指定颜色,则使用UA(用户代理)自行选择的颜色。 {{ note("如果想确保跨浏览器的一致性,请明确地指定一种颜色") }}</dd> + <dt><code><offset-x> <offset-y></code></dt> + <dd>必选。这些长度值指定阴影相对文字的偏移量。<code><offset-x></code> 指定水平偏移量,若是负值则阴影位于文字左边。 <code><offset-y></code> 指定垂直偏移量,若是负值则阴影位于文字上面。如果两者均为0,则阴影位于文字正后方(如果设置了<code><blur-radius> </code>则会产生模糊效果)。<br> + 可用单位请查看 {{ cssxref("<length>") }}。</dd> + <dt><code><blur-radius></code></dt> + <dd>可选。这是 {{ cssxref("<length>") }} 值。如果没有指定,则默认为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><p class="red-text-shadow"> + 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> + +<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><p class="white-with-blue-shadow"> + 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> + +<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("<color>")}} 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> |