css中字体描边怎么加

admin 轻心小站 关注 LV.19 运营
发表于前端技术学习版块 css,教程

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

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属性,分别实现了利用阴影效果与利用空心边框的技巧。在实际应用中,应根据具体需求,选择相应的方法。

文章说明:

本文原创发布于探乎站长论坛,未经许可,禁止转载。

题图来自Unsplash,基于CC0协议

该文观点仅代表作者本人,探乎站长论坛平台仅提供信息存储空间服务。

评论列表 评论
发布评论

评论: css中字体描边怎么加

粉丝

0

关注

0

收藏

0

已有0次打赏