text-stroke多重描边

最新推荐文章于 2025-01-01 11:38:52 发布

weixin_30545285

最新推荐文章于 2025-01-01 11:38:52 发布

阅读量291

点赞数 1

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/runhua/p/7185818.html

本文介绍了如何使用CSS的text-stroke属性实现文字描边效果，包括基本用法、多重描边及利用伪元素实现复杂描边的技术细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

text-stroke属性用于给文字进行描边，它其实和background属性等复合属性类似，有多个属性合并成的写法，只不过text-stroke只有两个属性合并：text-stroke-width和text-stroke-color.就是描边的颜色和宽度，在text-stroke中，颜色是默认为文字颜色，但是宽度则默认为0，所以在设置中，宽度必须设置。而如果我们不设置颜色值，那么字体将会比起以往更加的宽。

text-stroke是居中描边，所以要让字体比实际设置得要小一些的话，我们只需要让颜色设置成和背景颜色一致就可以了

如果我们要制作外描边的方法，可以利用阴影text-shadow来模拟，或者利用重叠覆盖的方法

多重描边：

text-shadow的属性可以不断叠加，但是text-stroke则不可以，如果想要实现多重描边效果，可以借助伪元素多层叠加模拟。

<p data-text="多重描边">多重描边</p>

p {
    -webkit-text-stroke: 1px #fff;
    font-size: 40px;
    position: relative;
    z-index: 0;
}
p::before,
p::after {
    content: attr(data-text);
    position: absolute; left: 0;
    z-index: -1;
}
p::before {
    -webkit-text-stroke: 7px yellow;
}
p::after {
    -webkit-text-stroke: 4px red;
}