diff options
Diffstat (limited to 'files/zh-cn/web/css/-webkit-text-stroke/index.html')
-rw-r--r-- | files/zh-cn/web/css/-webkit-text-stroke/index.html | 147 |
1 files changed, 147 insertions, 0 deletions
diff --git a/files/zh-cn/web/css/-webkit-text-stroke/index.html b/files/zh-cn/web/css/-webkit-text-stroke/index.html new file mode 100644 index 0000000000..b7ae89cb95 --- /dev/null +++ b/files/zh-cn/web/css/-webkit-text-stroke/index.html @@ -0,0 +1,147 @@ +--- +title: '-webkit-text-stroke' +slug: Web/CSS/-webkit-text-stroke +tags: + - CSS + - CSS Property + - CSS3 +translation_of: Web/CSS/-webkit-text-stroke +--- +<div></div> + +<h2 id="摘要">摘要</h2> + +<p> <strong><code>-webkit-text-stroke</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a>属性为文本字符指定了<a href="/en-US/docs/Web/CSS/length">宽</a> 和 <a href="/en-US/docs/Web/CSS/color_value">颜色</a> . 它是{{cssxref("-webkit-text-stroke-width")}} 和{{cssxref("-webkit-text-stroke-color")}}属性的缩写.</p> + +<h2 id="语法">语法</h2> + +<pre class="brush:css notranslate">/* 宽度和颜色属性 */ +-webkit-text-stroke: 4px navy; + +/* 全局属性 */ +-webkit-text-stroke: inherit; +-webkit-text-stroke: initial; +-webkit-text-stroke: unset; +</pre> + +<h3 id="值">值</h3> + +<dl> + <dt><code><length></code></dt> + <dd>文本宽.</dd> + <dt><code><color></code></dt> + <dd>文本颜色.</dd> +</dl> + +<h3 id="常规用法">常规用法</h3> + +<pre class="syntaxbox notranslate">/* 设置宽度和颜色 */ +-webkit-text-stroke: <length> <color>; + +/* 默认设置 */ +-webkit-text-stroke: inherit/initial/unset; +</pre> + + + +<h2 id="用例">用例</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><p id="example">The stroke of this text is red.</p></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css; highlight[4] notranslate">#example { + font-size: 3em; + margin: 0; + -webkit-text-stroke: 2px red; +} +</pre> + +<h2 id="规格">规格</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状况</th> + <th scope="col">注释</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Compat', '#the-webkit-text-stroke', '-webkit-text-stroke')}}</td> + <td>{{Spec2('Compat')}}</td> + <td>初始标准化</td> + </tr> + <tr> + <td><a class="external external-icon" href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-_webkit_text_stroke" hreflang="en" lang="en">Safari CSS Reference<br> + <small lang="en-US">'-webkit-text-stroke' in that document.</small></a></td> + <td>不标准非官方文件</td> + <td>初始定义</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容">浏览器兼容</h2> + +<p> 兼容情况一览表</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>基本支持</td> + <td>4</td> + <td>{{CompatGeckoDesktop("48.0")}}<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>15</td> + <td>3.1</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 Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>基本支持</td> + <td>4</td> + <td>{{CompatGeckoMobile("48.0")}}<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>36</td> + <td>4.1</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] 此功能在首选项 <code>layout.css.prefixes.webkit</code> 后面实现, 默认为<code>false</code>. 从Gecko 49 {{geckoRelease("49.0")}} 开始,默认为 <code>true</code>.</p> + +<h2 id="参考文档">参考文档</h2> + +<ul> + <li><a href="https://www.webkit.org/blog/85/introducing-text-stroke/">Surfin' Safari blog post announcing this feature</a></li> + <li><a href="https://css-tricks.com/adding-stroke-to-web-text/">CSS-Tricks article explaining this feature</a></li> + <li>{{cssxref("-webkit-text-stroke-width")}}</li> + <li>{{cssxref("-webkit-text-stroke-color")}}</li> + <li>{{cssxref("-webkit-text-fill-color")}}</li> +</ul> |