CSS3渐变色

 2021/03/22 · 资源分享 · 461次 ·  0
摘要:

经常用的就是给背景色增加渐变效果,这里的语法顺序不要错(牵扯到优雅降级和渐进增强,标准语法写到最后也是为了兼容各个版本浏览器,让浏览器先执行兼容在执行标准。),(right, red , blue) 这句话决定渐变方向是从右向左变色(效果如下)。( to right, red , blue) 的话就是要从左向右渐变,用CSS3的角度也可以改变渐变色的方向譬如: 50deg,也可以在颜色后面增加 50% 百分比来决定渐变位置,还有更多隐藏 buff 值得大家来探索。

一、背景色渐变

经常用的就是给背景色增加渐变效果,这里的语法顺序不要错(牵扯到优雅降级和渐进增强,标准语法写到最后也是为了兼容各个版本浏览器,让浏览器先执行兼容在执行标准。),(right, red , blue) 这句话决定渐变方向是从右向左变色(效果如下)。( to right, red , blue) 的话就是要从左向右渐变,用CSS3的角度也可以改变渐变色的方向譬如: 50deg,也可以在颜色后面增加 50% 百分比来决定渐变位置,还有更多隐藏 buff 值得大家来探索。
background: -webkit-linear-gradient(right, red , blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(right, red , blue); /* 标准的语法(必须放在最后) */

二、字体渐变色

background-image: -webkit-linear-gradient(bottom, rgb(0, 0, 0), rgb(255, 255, 255));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

本文地址:https://www.13qing.com/406.html
温馨提示:本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长删除处理。
版权声明:本文为原创文章,版权归 墨情博客 所有,欢迎分享本文,转载请保留出处!

 发表评论


验证码: