在线文档教程
CSS

-webkit-text-stroke

-webkit-text-stroke

非标准

此功能是非标准的。不要在面向Web的生产站点上使用它:它并不适用于每个用户。实现之间也可能存在很大的不兼容性,而且这种行为在未来可能会发生变化。

-webkit-text-strokeCSS属性为文本字符指定了宽 和 颜色 . 它是-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-width0

  • -webkit-text-stroke-colorcurrentcolor

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

结果

规范

SpecificationStatusComment
Compatibility StandardThe definition of '-webkit-text-stroke' in that specification.Living StandardInitial standardization
Safari CSS Reference '-webkit-text-stroke' in that document.Non-standard unofficial documentationInitial definition

浏览器兼容性

FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support4(Yes)48.0 (48.0)1No support153.1

FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support4(Yes)48.0 (48.0)1No support364.1