text-stroke 属性是一个实验属性，为文本提供装饰选项。
它是以下属性的简写：
- text-stroke-width
- text-stroke-color
有 text-fill-color 属性，它覆盖了 color 属性，允许在不支持 text-stroke 属性的浏览器中优雅地回退到不同的文本颜色。
我们可以从这里选择颜色：HTML 颜色。
Web 字体通常基于矢量图形，这意味着形状由数学和点而不是像素数据确定。
由于它们是矢量，我们可以做其他矢量程序可以用矢量文本完成的所有事情。
例如，我们可以为某些字符添加笔画。
text-stroke 属性仅与 -webkit- 供应商前缀一起使用。
这个属性不是标准的。
它并不适用于每个用户。
实现之间存在不兼容性，未来可能会改变行为。
| 初始值 | 0 CurrentColor. |
|---|---|
| 应用于 | 所有元素。 |
| 继承 | 可继承 |
| 可动画的 | 是的。 |
| 版本 | 兼容性标准 |
| DOM 语法 | object.style.textstrok =“1px#666”; |
CSS text-stroke 属性值说明
| 值 | 描述 |
|---|---|
| length | 指定笔划的厚度。 |
| color | 指定笔划的颜色。可以使用颜色名称，十六进制颜色代码，RGB（），RGBA（），HSL（），HSLA（）。 |
| initial | 使属性使用其默认值。 |
| inherit | 从父母元素继承属性。 |
语法
text-stroke: length | color | initial | inherit;
text-stroke 属性的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
p {
font-size: 2.5em;
margin: 0;
-webkit-text-stroke: 2px #1c87c9;
}
</style>
</head>
<body>
<h2>Text-stroke 属性示例</h2>
<p>生活终归还得继续。...</p>
</body>
</html>
具有多个值的 text-stroke 属性示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
.a {
font-size: 2.5em;
margin: 0;
-webkit-text-stroke: 1px #8ebf42;
}
.b {
font-size: 2.5em;
margin: 0;
-webkit-text-stroke: 2pt #8ebf42;
}
.c {
font-size: 2.5em;
margin: 0;
-webkit-text-stroke: 0.1cm #8ebf42;
}
</style>
</head>
<body>
<h2>Text-stroke 属性示例</h2>
<p class="a">生活终归还得继续。...</p>
<p class="b">生活终归还得继续。...</p>
<p class="c">生活终归还得继续。...</p>
</body>
</html>
日期：2020-06-02 22:14:49 来源：oir作者：oir