您现在的位置:首页 >> 前端 >> 内容

CSS3文字描边效果代码实现

时间:2017/9/28 8:14:00 点击:

  核心提示:CSS3 中有text-stroke属性,加上-webkit-前缀兼容性也还不错,但是只有在字体很大的时候才能看到描边效果,如果字体比较小,描边颜色会遮住文字本身颜色上图为黑色字体白色描边,字体颜色被...

CSS3 中有text-stroke属性,加上-webkit-前缀兼容性也还不错,但是只有在字体很大的时候才能看到描边效果,如果字体比较小,描边颜色会遮住文字本身颜色

CSS3文字描边效果代码实现

上图为黑色字体白色描边,字体颜色被遮盖

可以通过字体阴影text-shadow实现文字描边效果

text-shadow:2px 2px 0px #fff

CSS3文字描边效果代码实现

但是描边比较细,并且阴影是单方向的,我们可以添加对称方向的阴影:

如果觉得文字描边不够粗,可以使用多重字体阴影,这样就可以比较粗的描边

1px 1px 0px #FFFFFF, -1px -1px 0px #FFFFFF, 2px 2px 0px #FFFFFF, -2px -2px 0px #FFFFFF, 3px 3px 0px #FFFFFF, -3px -3px 0px #FFFFFF

CSS3文字描边效果代码实现

Tags:CS SS S3 3文 
作者:网络 来源:w20101310的