blob: d9c1e26ae620a68a2e4996150de66b41502ff77b (
plain)
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
|
---
title: '-webkit-text-stroke'
slug: Web/CSS/-webkit-text-stroke
tags:
- CSS
- No estándar(2)
- Propiedad
- Referencia
translation_of: Web/CSS/-webkit-text-stroke
---
<div>{{CSSRef}}{{Non-standard_header}}</div>
<h2 id="Resumen">Resumen</h2>
<p>La propiedad <a href="/es/docs/Web/CSS">CSS </a><strong><code>-webkit-text-stroke</code></strong> especifica la <a href="/es/docs/Web/CSS/length">anchura</a> y <a href="/es/docs/Web/CSS/color_value">color</a> del trazo para los caractéres de texto. Esta forma es una manera corta en relación con la forma larga que necesita usar las propiedades{{cssxref("-webkit-text-stroke-width")}} y {{cssxref("-webkit-text-stroke-color")}}.</p>
<p>{{cssinfo}}</p>
<h2 id="Síntaxis">Síntaxis</h2>
<pre class="brush:css notranslate">/* Valores anchura y color */
-webkit-text-stroke: 4px navy;
/* Valores globales */
-webkit-text-stroke: inherit;
-webkit-text-stroke: initial;
-webkit-text-stroke: unset;
</pre>
<h3 id="Valores">Valores</h3>
<dl>
<dt><code><length></code></dt>
<dd>La anchura del trazo.</dd>
<dt><code><color></code></dt>
<dd>El color del trazo.</dd>
</dl>
<h3 id="Síntaxis_Formal">Síntaxis Formal</h3>
<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
<h2 id="Ejemplo">Ejemplo</h2>
<h3 id="HTML">HTML</h3>
<pre class="brush: html notranslate"><p id="example">El trazo de este texto es rojo.</p></pre>
<h3 id="CSS">CSS</h3>
<pre class="brush: css notranslate">#example {
font-size: 50px;
margin: 0;
-webkit-text-stroke: 2px red;
}</pre>
<p>{{EmbedLiveSample("Example", 600, 60)}}</p>
<h2 id="Especificaciones">Especificaciones</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Especificación</th>
<th scope="col">Estado</th>
<th scope="col">Comentario</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('Compat', '#the-webkit-text-stroke', '-webkit-text-stroke')}}</td>
<td>{{Spec2('Compat')}}</td>
<td>Estandarización Inicial</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">Referencia CSS Safari<br>
<small lang="en-US">'-webkit-text-stroke' en ese documento.</small></a></td>
<td>Documentación no oficial y no estándar</td>
<td>Documentación Inicial</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Característica</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Soporte básico</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Característica</th>
<th>Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Soporte básico</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<h2 id="Ver_además">Ver además</h2>
<ul>
<li><a href="https://www.webkit.org/blog/85/introducing-text-stroke/">Post en el blog Surfin' Safari anunciando esta característica</a></li>
<li><a href="https://css-tricks.com/adding-stroke-to-web-text/">Artículo en CSS-Tricks explicando esta característica</a></li>
<li>{{cssxref("-webkit-text-stroke-width")}}</li>
<li>{{cssxref("-webkit-text-stroke-color")}}</li>
<li>{{cssxref("-webkit-text-fill-color")}}</li>
</ul>
|
