---
title: '-webkit-text-stroke'
slug: Web/CSS/-webkit-text-stroke
tags:
  - CSS
  - CSS Property
  - CSS3
translation_of: Web/CSS/-webkit-text-stroke
---


<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>