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