[分享]css中字体描边怎么加

CSS是一种样式语言，它可以用来装饰和美化网页。其中添加字体描边是可以让文字更加醒目突出的一种装饰方法。下面我们来学习一下在CSS中如何添加字体描边。/ 代码示例 / textshadow: 1px ...

CSS是一种样式语言，它可以用来装饰和美化网页。其中添加字体描边是可以让文字更加醒目突出的一种装饰方法。下面我们来学习一下在CSS中如何添加字体描边。

/* 代码示例 */
text-shadow: 1px 1px 2px #000, -1px -1px 2px #000, 1px -1px 2px #000, -1px 1px 2px #000; 

代码解释：

text-shadow属性是CSS3新增的属性，用来为文本添加阴影效果。

其中，具体的阴影效果由一些参数来指定，这些参数分别是：水平阴影位置（x轴）、垂直阴影位置（y轴）、阴影模糊半径、阴影颜色。这里我们设置了四个阴影，所以使用了四组参数。

/* 代码示例 */
p {
    -webkit-text-stroke: 1px black;
    text-stroke: 1px black;
    color: white;
} 

代码解释：

在CSS中，还有一种添加字体描边的方法，那就是使用text-stroke属性。text-stroke能够在文字外围添加空心边框，达到描边的效果。

为了兼容性，我们同时设置了两种文本描边方式：-webkit-text-stroke和text-stroke，其中前者支持webkit内核的浏览器，后者支持其他浏览器。我们在这里设置了1px的黑色描边，同时将文字颜色设置为白色，达到了白底黑字描边的效果。

总结

在CSS中，添加字体描边可以使用text-shadow属性或者text-stroke属性，分别实现了利用阴影效果与利用空心边框的技巧。在实际应用中，应根据具体需求，选择相应的方法。