CSS3渐变色

原创  admin  2021-03-22  344  0

CSS3渐变色-墨情博客

一、背景色渐变

经常用的就是给背景色增加渐变效果,这里的语法顺序不要错(牵扯到优雅降级和渐进增强,标准语法写到最后也是为了兼容各个版本浏览器,让浏览器先执行兼容在执行标准。),(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
温馨提示:文章内容系作者个人观点,不代表 墨情博客对观点赞同或支持。
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!

 发表评论


验证码: