aboutsummaryrefslogtreecommitdiff
path: root/files/zh-cn/web/css/-webkit-text-stroke/index.html
diff options
context:
space:
mode:
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.html147
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>&lt;length&gt;</code></dt>
+ <dd>文本宽.</dd>
+ <dt><code>&lt;color&gt;</code></dt>
+ <dd>文本颜色.</dd>
+</dl>
+
+<h3 id="常规用法">常规用法</h3>
+
+<pre class="syntaxbox notranslate">/* 设置宽度和颜色 */
+-webkit-text-stroke: &lt;length&gt; &lt;color&gt;;
+
+/* 默认设置 */
+-webkit-text-stroke: inherit/initial/unset;
+</pre>
+
+
+
+<h2 id="用例">用例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;p id="example"&gt;The stroke of this text is red.&lt;/p&gt;</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>