码迷,mamicode.com
首页 > Web开发 > 详细

CSS常用渐变

时间:2016-09-20 13:41:56      阅读:173      评论:0      收藏:0      [点我收藏+]

标签:

边框渐变:

1 border-image: -webkit-linear-gradient( red , blue) 30 30;
2 border-image: -moz-linear-gradient( red, blue) 30 30;
3 border-image: linear-gradient( red , blue) 30 30;

技术分享

 

文字渐变:(只支持-webkit-)

1 background-image: -webkit-gradient(linear, 0 0, 0 80%, from(nth($color7, 3)), to(nth($color7, 4)));
2 -webkit-background-clip: text;
3 -webkit-text-fill-color: transparent;

技术分享

 

背景渐变:

1 filter: alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0);
2 -ms-filter: alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0);  
3 background: red; /* 一些不支持背景渐变的浏览器 */  
4 background: -moz-linear-gradient(top, red, blue);  
5 background: -webkit-gradient(linear, 0 0, 0 bottom, from(red), to(blue));

 

 技术分享

 

CSS常用渐变

标签:

原文地址:http://www.cnblogs.com/front-end-1149980941/p/5888294.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!