首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

-webkit-text-stroke

非标准

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

-webkit-text-strokeCSS属性为文本字符指定了?和?颜色?. 它是-webkit-text-stroke-width-webkit-text-stroke-color属性的缩写.

代码语言:javascript
复制
/* 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
代码语言:txt
复制
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:计算颜色
代码语言:txt
复制
Animation type as each of the properties of the shorthand:
  • -webkit-text-stroke-width:离散
  • -webkit-text-stroke-color:颜色
代码语言:txt
复制
Canonical order Canonical order  

语法

<length>笔划的宽度。

<color>笔画的颜色。

正式语法

代码语言:javascript
复制
<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

代码语言:javascript
复制
<p id="example">The stroke of this text is red.</p>

CSS

代码语言:javascript
复制
#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

扫码关注腾讯云开发者

领取腾讯云代金券

http://www.vxiaotou.com