css3 给字体加白边

CSS3给字体加白边（text-stroke）是一种非常常用的文本效果，在页面设计中有许多应用场景。下面将介绍如何使用CSS3给字体加白边。

代码如下：.white-stroke {
    -webkit-text-stroke: 1px white;
    text-stroke: 1px white;
    color: black;
}
    

如上代码所示，可以使用“-webkit-text-stroke”和“text-stroke”属性来达到这个效果。

代码解释：-webkit-text-stroke: 1px white;
    text-stroke: 1px white;
    color: black;
    

第一个属性是“-webkit-text-stroke”，它用来定义文本描边的颜色和宽度。这里我们设置描边为1个像素，颜色为白色。请注意，这个属性在一些旧版的Chrome浏览器中存在兼容性问题。

第二个属性是“text-stroke”，用来定义文本描边的宽度和颜色。它与“-webkit-text-stroke”作用相同，但适用于除了Chrome之外的浏览器。

第三个属性是“color”，这个属性用来定义文本的颜色。在此例中，文本颜色被设置为黑色。

现在我们可以在一个样式类中使用这些属性，并将其应用到希望添加白边的文本中：

p class="white-stroke">
    这是一段文本/p>
    

以上代码会将一段文本添加白色描边效果。

总之，CSS3的“text-stroke”属性是一种非常简单的给文字添加描边的方法。只需通过几行代码就可以给文本增加炫酷的视觉效果，增强页面的吸引力。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！