tml的css3实现带渐变的炫酷按钮

用到的技术有CSS3的渐变，CSS3动画等

效果图：

实现代码

html:

css:

下图所示，在网页设计中，有时候会需要用到渐变效果，渐变可以创建出类似于彩虹的视觉图案效果，在没有CSS3之前，为了显示一个渐变需要专门制作一个图片，这种不法不但不灵活还增加请求数，而CSS3可以轻松实现网页渐变效果，用于做渐变背景、渐变导航、配合CSS3动画做特效等。在CSS3中，Gradient（渐变）分为linear-gradient(线性渐变)和radial-gradient(径向渐变)。CSS颜色线性渐变的语法在各种浏览器里的实现稍微有些不同，但最后是统一标准的：

CSS颜色线性渐变的语法

background-image:linear-gradient(<point>||<angle>,]?<stop>,<stop>[,<stop>]*)

第一个参数是渐变起始点或角。第二个参数是一种颜色停止点(color stops)。至少需要两种颜色(起点和终点)，你可以添加任意种颜色来增加颜色渐变的丰富程度。对颜色停止点的定义可以是一种颜色，或一种颜色加一个百分比：

/*color-stop(percentage/amount,color)*/color-stop(0.20,red)

因为CSS渐变色(Gradients)技术是CSS3里比较新的技术，属于高级的CSS功能，于是每种浏览器对这种技术的实现都添加了一些自己的特色。例如以WebKIt为渲染引擎的谷歌浏览器，就对它实现了多种语法。下面的这段代码基本包括了所有自顶向下颜色渐变的所有情况：

#example1{/*底色*/background-color:#063053;/*chrome2+,safari4+;multiplecolorstops*/background-image:-webkit-gradient(linear,leftbottom,lefttop,color-stop(0.32,#063053),color-stop(0.66,#395873),color-stop(0.83,#5c7c99));/*chrome10+,safari5.1+*/background-image:-webkit-linear-gradient(#063053,#395873,#5c7c99);/*firefox;multiplecolorstops*/background-image:-moz-linear-gradient(top,#063053,#395873,#5c7c99);/*ie6+*/filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#063053',endColorstr='#395873');/*ie8+*/-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#063053',endColorstr='#395873')";/*ie10*/background-image:-ms-linear-gradient(#063053,#395873,#5c7c99);/*opera11.1*/background-image:-o-linear-gradient(#063053,#395873,#5c7c99);/*标准写法*/background-image:linear-gradient(#063053,#395873,#5c7c99);

注意，我们首先设定了一个背景色。这个颜色是在万一用户使用的浏览器不支持CSS渐变色(Gradients)技术时使用的颜色。CSS渐变色(Gradients)技术里还支持带有角度的渐变方向，而不仅仅只有直上直下或直左直右。我们可以用下面的语法实现它：

#example2{/*fallback*/background-color:#063053;/*chrome2+,safari4+;multiplecolorstops*/background-image:-webkit-gradient(linear,leftbottom,righttop,color-stop(0.32,#063053),color-stop(0.66,#395873),color-stop(0.83,#5c7c99));/*chrome10+,safari5.1+*/background-image:-webkit-linear-gradient(45deg,#063053,#395873,#5c7c99);/*firefox;multiplecolorstops*/background-image:-moz-linear-gradient(45deg,#063053,#395873,#5c7c99);/*ie10*/background-image:-ms-linear-gradient(45deg,#0630530%,#395873100%);/*opera11.1*/background-image:-o-linear-gradient(45deg,#063053,#395873);/*The"standard"*/background-image:linear-gradient(45deg,#063053,#395873);}

我们可以做的更复杂些….一个色彩缤纷的CSS颜色渐变？下面我们来做一个彩虹：

/*example3-linearrainbow*/#example3{/*fallback*/background-color:#063053;/*chrome2+,safari4+;multiplecolorstops*/background-image:-webkit-gradient(linear,leftbottom,lefttop,color-stop(0.20,red),color-stop(0.40,green),color-stop(0.6,blue),color-stop(0.8,purple),color-stop(1,orange));/*chrome10+,safari5.1+*/background-image:-webkit-linear-gradient(red,green,blue,purple,orange);/*firefox;multiplecolorstops*/background-image:-moz-linear-gradient(top,red,green,blue,purple,orange);/*ie10*/background-image:-ms-linear-gradient(red,green,blue,purple,orange);/*opera11.1*/background-image:-o-linear-gradient(red,green,blue,purple,orange);/*The"standard"*/background-image:linear-gradient(red,green,blue,purple,orange);}

关于IE对CSS颜色渐变技术的支持做一些说明：在早期IE是使用filter和-ms-filter语法实现渐变色，而最新版的IE里改为了-ms-linear-gradient语法。我们可以使用CSS里条件判断语句来解决这个问题：

<!--[ifltIE10]><style>.gradientElement{filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#063053',endColorstr='#395873');-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#063053',endColorstr='#395873')";}</style><![endif]-->

线性渐变的语法

对象选择器 {background:-浏览器前缀-linear-gradient( 起点方向,起点颜色,终点颜色);}

径向渐变的语法

对象选择器 {background:-浏览器前缀-radial-gradient( 起点方向,形状,大小,起点颜色,终点颜色);}

渐变的兼容方法

1、线性渐变

各浏览器前缀

(1)Firefox

(2)Safari , Chrome

(3)Opera 11.10+

兼容IE

2、径向渐变

径向渐变和线性渐变的语法差不多

渐变应用实例

1、径向渐变做大背景

background-color:#4B770A;background-image:-webkit-gradient(radial,50%400,1,50%400,400,from(rgba(255,255,255,0.3)),to(rgba(255,255,255,0)));//仅实现了webkit下的效果

2、蒙版效果

position:fixed;width:100%;height:60px;bottom:0px;content:'';background:-moz-linear-gradient(top,rgba(255,255,255,0)0%,rgba(255,255,255,0.33)33%,rgba(255,255,255,0.73)66%,rgba(255,255,255,1)91%);background:-webkit-gradient(linear,lefttop,leftbottom,color-stop(0%,rgba(255,255,255,0)),color-stop(33%,rgba(255,255,255,0.33)),color-stop(66%,rgba(255,255,255,0.73)),color-stop(91%,rgba(255,255,255,1)));background:-webkit-linear-gradient(top,rgba(255,255,255,0)0%,rgba(255,255,255,0.33)33%,rgba(255,255,255,0.73)66%,rgba(255,255,255,1)91%);background:-o-linear-gradient(top,rgba(255,255,255,0)0%,rgba(255,255,255,0.33)33%,rgba(255,255,255,0.73)66%,rgba(255,255,255,1)91%);background:-ms-linear-gradient(top,rgba(255,255,255,0)0%,rgba(255,255,255,0.33)33%,rgba(255,255,255,0.73)66%,rgba(255,255,255,1)91%);background:linear-gradient(top,rgba(255,255,255,0)0%,rgba(255,255,255,0.73)33%,rgba(255,255,255,0.73)66%,rgba(255,255,255,1)91%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff',endColorstr='#ffffff',GradientType=0);

3、渐变按钮

.myButton{-moz-box-shadow:inset0px1px0px0px#ffffff;-webkit-box-shadow:inset0px1px0px0px#ffffff;box-shadow:inset0px1px0px0px#ffffff;background:-webkit-gradient(linear,lefttop,leftbottom,color-stop(0.05,#ededed),color-stop(1,#dfdfdf));background:-moz-linear-gradient(top,#ededed5%,#dfdfdf100%);background:-webkit-linear-gradient(top,#ededed5%,#dfdfdf100%);background:-o-linear-gradient(top,#ededed5%,#dfdfdf100%);background:-ms-linear-gradient(top,#ededed5%,#dfdfdf100%);background:linear-gradient(tobottom,#ededed5%,#dfdfdf100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed',endColorstr='#dfdfdf',GradientType=0);background-color:#ededed;-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;border:1pxsolid#dcdcdc;display:inline-block;cursor:pointer;color:#777777;font-family:arial;font-size:15px;font-weight:bold;padding:6px24px;text-decoration:none;text-shadow:0px1px0px#ffffff;margin-top:100px;}.myButton:hover{background:-webkit-gradient(linear,lefttop,leftbottom,color-stop(0.05,#dfdfdf),color-stop(1,#ededed));background:-moz-linear-gradient(top,#dfdfdf5%,#ededed100%);background:-webkit-linear-gradient(top,#dfdfdf5%,#ededed100%);background:-o-linear-gradient(top,#dfdfdf5%,#ededed100%);background:-ms-linear-gradient(top,#dfdfdf5%,#ededed100%);background:linear-gradient(tobottom,#dfdfdf5%,#ededed100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf',endColorstr='#ededed',GradientType=0);background-color:#dfdfdf;}.myButton:active{position:relative;top:1px;}

4、用径向渐变做一张优惠券

主要的代码如下：

background:radial-gradient(transparent0,transparent5px,#F39B005px);background-size:15px15px;background-position:9px3px;

完整代码：

CSS代码

这是公共样式.stamp{width:387px;height:140px;padding:010px;position:relative;overflow:hidden;}.stamp:before{content:'';position:absolute;top:0;bottom:0;left:10px;right:10px;z-index:-1;}.stamp:after{content:'';position:absolute;left:10px;top:10px;right:10px;bottom:10px;box-shadow:0020px1pxrgba(0,0,0,0.5);z-index:-2;}.stampi{position:absolute;left:20%;top:45px;height:190px;width:390px;background-color:rgba(255,255,255,.15);transform:rotate(-30deg);}.stamp.par{float:left;padding:16px15px;width:220px;border-right:2pxdashedrgba(255,255,255,.3);text-align:left;}.stamp.parp{color:#fff;}.stamp.parspan{font-size:50px;color:#fff;margin-right:5px;}.stamp.par.sign{font-size:34px;}.stamp.parsub{position:relative;top:-5px;color:rgba(255,255,255,.8);}.stamp.copy{display:inline-block;padding:21px14px;width:100px;vertical-align:text-bottom;font-size:30px;color:rgb(255,255,255);}.stamp.copyp{font-size:16px;margin-top:15px;}

.stamp01{background:#F39B00;background:radial-gradient(rgba(0,0,0,0)0,rgba(0,0,0,0)5px,#F39B005px);background-size:15px15px;background-position:9px3px;}.stamp01:before{background-color:#F39B00;}

.stamp02{background:#D24161;background:radial-gradient(transparent0,transparent5px,#D241615px);background-size:15px15px;background-position:9px3px;}.stamp02:before{background-color:#D24161;}

.stamp03{background:#7EAB1E;background:radial-gradient(transparent0,transparent5px,#7EAB1E5px);background-size:15px15px;background-position:9px3px;}.stamp03:before{background-color:#7EAB1E;}.stamp03.copy{padding:10px6px10px12px;font-size:24px;}.stamp03.copyp{font-size:14px;margin-top:5px;margin-bottom:8px;}.stamp03.copya{background-color:#fff;color:#333;font-size:14px;text-decoration:none;padding:5px10px;border-radius:3px;display:block;}

.stamp04{width:390px;background:#50ADD3;background:radial-gradient(rgba(0,0,0,0)0,rgba(0,0,0,0)4px,#50ADD34px);background-size:12px8px;background-position:-5px10px;}.stamp04:before{background-color:#50ADD3;left:5px;right:5px;}.stamp04.copy{padding:10px6px10px12px;font-size:24px;}.stamp04.copyp{font-size:14px;margin-top:5px;margin-bottom:8px;}.stamp04.copya{background-color:#fff;color:#333;font-size:14px;text-decoration:none;padding:5px10px;border-radius:3px;display:block;}

HTML代码

<divclass="stampstamp01"><divclass="par"><p>XXXXXX折扣店</p><subclass="sign">￥</sub><span>50.00</span>_优惠券<p>订单满100.00元</p></div><divclass="copy">副券<p>2015-08-13<br>2016-08-13</p></div><i></i></div>

<divclass="stampstamp02"><divclass="par"><p>XXXXXX折扣店</p><subclass="sign">￥</sub><span>50.00</span>_优惠券<p>订单满100.00元</p></div><divclass="copy">副券<p>2015-08-13<br>2016-08-13</p></div><i></i></div>

<divclass="stampstamp03"><divclass="par"><p>XXXXXX折扣店</p><subclass="sign">￥</sub><span>50.00</span>_优惠券<p>订单满100.00元</p></div><divclass="copy">副券<p>2015-08-13<br>2016-08-13</p><ahref="#">立即使用</a></div><i></i></div>

<divclass="stampstamp04"><divclass="par"><p>XXXXXX折扣店</p><subclass="sign">￥</sub><span>50.00</span>_优惠券<p>订单满100.00元</p></div><divclass="copy">副券<p>2015-08-13<br>2016-08-13</p><ahref="#">立即使用</a></div><i></i></div>

PS：用这个方式还可以做邮票，不信你试试

相信你看到这，一定觉得，这么长串的代码，我怎么写出来，看着都晕。如果是简单的渐变，可以用less的函数来生成，只需要提供开始颜色和停止颜色。如果是按钮，则有专门的网站，可视化生成。

Less函数

/*线性渐变*/.gradient(@origin:top,@start:#ffffff,@stop:#000000){background-color:@start;background-image:-webkit-linear-gradient(@origin,@start,@stop);background-image:-moz-linear-gradient(@origin,@start,@stop);background-image:-o-linear-gradient(@origin,@start,@stop);background-image:-ms-linear-gradient(@origin,@start,@stop);background-image:linear-gradient(@origin,@start,@stop);}

/*快速渐变*/.quick-gradient(@origin:left,@alpha:0.2){background-image:-webkit-linear-gradient(@origin,rgba(0,0,0,0.0),rgba(0,0,0,@alpha));background-image:-moz-linear-gradient(@origin,rgba(0,0,0,0.0),rgba(0,0,0,@alpha));background-image:-o-linear-gradient(@origin,rgba(0,0,0,0.0),rgba(0,0,0,@alpha));background-image:-ms-linear-gradient(@origin,rgba(0,0,0,0.0),rgba(0,0,0,@alpha));background-image:linear-gradient(@origin,rgba(0,0,0,0.0),rgba(0,0,0,@alpha));}

用法：

//html代码<divclass="div1"></div><divclass="div2"></div>//css代码div{width:200px;height:80px;margin:10px;}.div1{.gradient(top,#00B7EA,#0391B3);}.div2{.quick-gradient();}