CSS3 text-outline 属性

CSS3 text-outline 属性可以为文本添加轮廓线，这与CSS2的 text-shadow 属性不同，它不会在文本周围产生阴影效果，而是为文本添加了一条线。

语法

text-outline: thickness color;

• thickness：边线的厚度，可以是像素(px)、em或%等单位，可以是正值、负值或0。
• color：边线的颜色。

兼容性

该属性在较新的浏览器中得到了广泛支持。

实例

1. 添加边线框

我们可以在style标签或css文件中为元素添加 text-outline 属性，以添加一条轮廓线，并为其设置颜色和大小。

h1 {
  text-outline: 2px red;
}

2. 添加不同颜色的多条边线框

同样，我们可以使用 text-outline 实现多条边线框的效果，即添加多个text-outline属性并为其设置不同颜色和大小。

h1 {
  text-outline: 2px blue;
  text-outline: 4px green;
  text-outline: 6px red;
}

3. 边框位置

我们可以使用正偏移量和负偏移量，使轮廓线在文本的内侧或外侧。

h1 {
  text-outline: 2px red; /* 默认是在文本外侧 */
  text-outline: -2px red; /* 在文本内侧 */
}

总结

• CSS3 text-outline 属性可以为文本添加轮廓线。
• 通过设置边线的厚度和颜色，我们可以控制轮廓线的大小和颜色。
• 通过设置正偏移量和负偏移量，我们可以控制轮廓线的位置。