木灵鱼儿

木灵鱼儿

阅读：2108

最后更新：2018/04/11/ 15:08:15

CSS3文字渐变效果

暂时还是需要加前缀才可以生效，而且只支持webkit，个人测试电脑端新的浏览器都是可以支持的，除了ie不行，手机端我测试了安卓7.0和火狐浏览器，都是可以显示的，所以日常用一用还是可以的！

效果图：

css3文字渐变

代码：

-webkit-text-fill-color: transparent;
background:linear-gradient(to bottom,#666 50%, #aaa 50%);
-webkit-background-clip:text;

注意：

原理是通过设置文字填充为透明，然后让背景色渐变显示到文字中，background-clip:text将渐变展示为文本大小。

由于这个属性暂时只支持-webkit-，所以按道理来讲，我们设置渐变的时候也是要加上-webkit-前缀，但是由于浏览器已经都支持了，前缀被取消了，所以你加了前缀反倒没有效果，这个地方要注意下。

"原版：background:-webkit-linear-gradient(to bottom,#666 50%, #aaa 50%);"

文章分类 CSS
文章标签 textbackgroundfontcss3css3文字渐变-webkit-text-fill-colorbackground-clip透明渐变css特效
木灵鱼儿

木灵鱼儿

发布了 718 篇文章获得点赞 0获得阅读 2108

版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可，禁止转载。

one
two
three

关于作者

站点职位 博主
获得点赞 0
文章被阅读 2108

相关文章

利用原生css实现hash哈希定位跳转偏移量处理利用原生css实现hash哈希定位跳转偏移量处理
ts实战：给没有类型声明的第三方库编写一个类型声明文件ts实战：给没有类型声明的第三方库编写一个类型声明文件
利用发布订阅模式封装一个IntersectionObserver利用发布订阅模式封装一个IntersectionObserver
typecho 自定义分类和分类高亮处理typecho 自定义分类和分类高亮处理
ts封装一个localStorage和sessionStorage的类ts封装一个localStorage和sessionStorage的类

目录树