CSS3文字描边效果

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

这里写图片描述

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

当然text-stroke也有hack的方法来实现阴影,那就是先设置font-size为一个比较大的值,再进行scale操作。

还有第二种方法,我们可以通过字体阴影text-shadow实现文字描边效果

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

这里写图片描述

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

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

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

这里写图片描述
chaos-fe

posted @   一颗小行星-  阅读(309)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· AI与.NET技术实操系列(二):开始使用ML.NET
· 单线程的Redis速度为什么快?
点击右上角即可分享
微信分享提示