files/zh-cn/web/css/-webkit-text-stroke/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
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>