-webkit-text-stroke
-webkit-text-stroke
非标准
此功能是非标准的。不要在面向Web的生产站点上使用它:它并不适用于每个用户。实现之间也可能存在很大的不兼容性,而且这种行为在未来可能会发生变化。
-webkit-text-stroke
CSS属性为文本字符指定了宽 和 颜色 . 它是-webkit-text-stroke-width
和-webkit-text-stroke-color
属性的缩写.
/* Width and color values */
-webkit-text-stroke: 4px navy;
text-stroke: 4px navy;
/* Global values */
-webkit-text-stroke: inherit;
-webkit-text-stroke: initial;
-webkit-text-stroke: unset;
text-stroke: inherit;
text-stroke: initial;
text-stroke: unset;
初始值 | as each of the properties of the shorthand: -webkit-text-stroke-width: 0 -webkit-text-stroke-color: currentcolor |
---|---|
适用元素 | all elements |
是否是继承属性 | yes |
适用媒体 | visual |
计算值 | as each of the properties of the shorthand: -webkit-text-stroke-width: absolute <length> -webkit-text-stroke-color: computed color |
动画类型 | as each of the properties of the shorthand: -webkit-text-stroke-width: discrete -webkit-text-stroke-color: a color |
正规顺序 | Canonical order |
-webkit-text-stroke-width
:0
-webkit-text-stroke-color
:currentcolor
Applies to all elements [Inherited](inheritance) yes Media visual [Computed value](computed_value) as each of the properties of the shorthand:
- -webkit-text-stroke-width:绝对<length>
-webkit-text-stroke-color
:计算颜色
Animation type as each of the properties of the shorthand:
-webkit-text-stroke-width
:离散
-webkit-text-stroke-color
:颜色
Canonical order Canonical order
语法
值
<length>笔划的宽度。
正式语法
<length> || <color>where
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
where
<rgb()> = rgb( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<rgba()> = rgba( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<hsl()> = hsl( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )
<hsla()> = hsla( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )
where
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>
示例
HTML
<p id="example">The stroke of this text is red.</p>
CSS
#example {
font-size: 3em;
margin: 0;
-webkit-text-stroke: 2px red;
}
结果
规范
Specification | Status | Comment |
---|---|---|
Compatibility StandardThe definition of '-webkit-text-stroke' in that specification. | Living Standard | Initial standardization |
Safari CSS Reference '-webkit-text-stroke' in that document. | Non-standard unofficial documentation | Initial definition |
浏览器兼容性
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | 4 | (Yes) | 48.0 (48.0)1 | No support | 15 | 3.1 |
Feature | Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | 4 | (Yes) | 48.0 (48.0)1 | No support | 36 | 4.1 |