css3 文字加边框
导读：CSS3中提供了更多样式丰富的文字样式，其中包括了文字边框的应用，下面我们来了解一下。首先，我们需要使用CSS3中的“text-stroke”属性来设置文字的边框。这个属性需要指定两个属性值，一个是文字边框的宽度，一个是文字边框的颜色。比如...
CSS3中提供了更多样式丰富的文字样式，其中包括了文字边框的应用，下面我们来了解一下。首先，我们需要使用CSS3中的“text-stroke”属性来设置文字的边框。这个属性需要指定两个属性值，一个是文字边框的宽度，一个是文字边框的颜色。比如：
p{
font-size: 28px;
color: #fff;
text-stroke: 1px #000;
}
上面的代码中，我们设置了文字大小为28像素，并将文字的颜色设置为白色。接着，使用“text-stroke”属性在文字周围添加了一个宽度为1像素的黑色边框。
但是，这样的文字边框会让文字变得不那么清晰，因为文字边缘被覆盖了一部分。为了解决这个问题，我们可以添加“-webkit-text-stroke”属性。这个属性可以让文字边框呈现在文字的内侧。比如：
p{
font-size: 28px;
color: #fff;
-webkit-text-stroke: 1px #000;
text-stroke: 1px #000;
}
除了改变文字边框的宽度和颜色之外，我们还可以使用“text-fill-color”属性，这个属性可以设置文字的填充颜色。比如：
p{
font-size: 28px;
color: #fff;
-webkit-text-stroke: 2px #000;
text-stroke: 2px #000;
-webkit-text-fill-color: #f00;
}
上面的代码中，我们仍然设置了黑色的文字边框，但是将文字的填充颜色设置为了红色。这样就可以让文字的颜色更加醒目啦。
通过以上介绍，我们可以知道在CSS3中文字边框的应用，可以让文字更加鲜艳，突出，增加阅读效果。
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： css3 文字加边框
本文地址： https://pptw.com/jishu/566770.html