DigitalOcean 为您的每个旅程阶段提供云产品。立即开始使用 $200 免费信用额度!
text-stroke
是一种实验性属性,它提供类似于 Adobe Illustrator 或其他矢量绘图应用程序中的文本装饰选项。它目前未包含在任何 W3C 或 WHATWG 规范中。截至 2013 年 6 月,它仅在 -webkit
供应商前缀后实现,尽管 Firefox 和 Internet Explorer 的未来版本可能会支持该属性(可能在其自己的前缀下)。
mark {
text-stroke: 2px red;
}
text-stroke
属性实际上是另外两个属性的简写:
text-stroke-width
,它接受单位值(1px、0.125em、4in 等)并描述描边效果的厚度。text-stroke-color
,它接受颜色值(十六进制、rgb/rgba、hsl/hsla 等)。
text-stroke
还有一个配套属性 text-fill-color
,它将覆盖 color
属性,允许在不支持 text-stroke
的浏览器中优雅地回退到不同的文本颜色。
关注点
text-stroke
绘制的描边与文本形状的中心对齐(与 Adobe Illustrator 中的默认设置相同),目前没有选项可以将对齐方式设置为形状的内部或外部。不幸的是,这使得它变得不太好用,因为无论现在如何,描边都会干扰字母的形状,破坏了原始字体设计师的意图。设置将是理想的,但如果我们必须选择一个,外部描边会更有用。- 在 Webkit 中,
text-stroke
可以使用 CSS 过渡和动画进行动画化 - 但仅限于描边颜色,而不是描边宽度。 text-stroke
效果的更兼容浏览器(并且可以说更健壮)的替代方案是使用text-shadow
,这在 这篇文章中 有所概述。
浏览器支持
此浏览器支持数据来自 Caniuse,其中包含更多详细信息。数字表示浏览器在该版本及更高版本中支持该功能。
桌面
Chrome | Firefox | IE | Edge | Safari |
---|---|---|---|---|
4* | 49* | 否 | 15* | 3.1* |
移动/平板
Android Chrome | Android Firefox | Android | iOS Safari |
---|---|---|---|
127* | 127* | 2.1* | 4.0-4.1* |
更多信息
相关
text-decoration
.element { text-decoration: underline; }
text-decoration-line
.element { text-decoration-line: underline; }
text-decoration-style
.element { text-decoration-style: wavy; }
text-decoration-thickness
.element { text-decoration-thickness: 2px; }
text-underline-offset
.element { text-underline-offset: 0.5em; }
text-underline-position
.element { text-underline-position: under; }
不错的技巧,谢谢
关于外部笔触,请查看我的愿望
https://github.com/w3c/fxtf-drafts/issues/117
它适用于 Firefox、Chrome 和 Edge 以及其他除 IE 之外的浏览器(IE 现在已经死了),使用
“-webkit”,但它说是非标准的,那么应该使用它吗?
很酷,我记不起这个选择器的名字,所以我不得不手动搜索。
外部文本笔触可以用
text-shadow
模拟。为此有一个方便的 SASS 混合:https://github.com/hudochenkov/sass-text-stroke