-webkit-text-stroke

在此页

组成特性
句法
形式定义
形式句法
范例
规范
浏览器兼容性
另请参阅
相关话题

非标
此特征是非标准的，且不在标准轨道中。不要在面向 Web 的生产站点中使用它：它不适用于每个用户。实现之间可能存在大的不兼容性，且行为将来可能改变。

-webkit-text-stroke CSS property specifies the width and color of strokes for text characters. This is a shorthand property for the longhand properties -webkit-text-stroke-width and -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;

组成特性

此特性是下列 CSS 特性的简写：

句法

值

<length>
<color>

形式定义

初始值	as each of the properties of the shorthand: `-webkit-text-stroke-width` : `0` `-webkit-text-stroke-color` : `currentcolor`
适用于	所有元素
继承	yes
计算值	as each of the properties of the shorthand: `-webkit-text-stroke-width` : absolute `<length>` `-webkit-text-stroke-color` ：计算颜色
动画类型	as each of the properties of the shorthand: `-webkit-text-stroke-width` : discrete `-webkit-text-stroke-color` : a color

形式句法

<length> || <color>where 
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
where 
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )
where 
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>

范例

Adding a red text stroke

HTML

<p id="example">The stroke of this text is red.</p>

CSS

#example {
  font-size: 3em;
  margin: 0;
  -webkit-text-stroke: 2px red;
}

结果

规范

规范	状态	注释
Compatibility Standard The definition of '-webkit-text-stroke' in that specification.	实时标准	Initial standardization
Safari CSS Reference '-webkit-text-stroke' in that document.	Non-standard unofficial documentation	初始定义

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`-webkit-text-stroke` 非标	Chrome 完整支持 4	Edge 完整支持 15	Firefox 完整支持 49 完整支持 48 Disabled Disabled preference (needs to be set to ). To change preferences in Firefox, visit about:config.	IE 不支持 No	Opera 完整支持 15	Safari 完整支持 3	WebView Android 完整支持 4	Chrome Android 完整支持 18	Firefox Android 完整支持 49 完整支持 49 完整支持 48 Disabled Disabled preference (needs to be set to ). To change preferences in Firefox, visit about:config.	Opera Android 完整支持 14	Safari iOS 完整支持 2	Samsung Internet Android 完整支持 1.0

在此页