多种CSS3渐变应用方法总结附实例

2021-10-15 10:47 更新

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

css3渐变

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;
	/* chrome 2+, safari 4+; multiple color stops */
	background-image:-webkit-gradient(linear, left bottom, left top, color-stop(0.32, #063053), color-stop(0.66, #395873), color-stop(0.83, #5c7c99));
	/* chrome 10+, safari 5.1+ */
	background-image: -webkit-linear-gradient(#063053, #395873, #5c7c99);
	/* firefox; multiple color stops */
	background-image: -moz-linear-gradient(top,#063053, #395873, #5c7c99);
	/* ie 6+ */
	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);
	/* opera 11.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;
	/* chrome 2+, safari 4+; multiple color stops */
	background-image:-webkit-gradient(linear, left bottom, right top, color-stop(0.32, #063053), color-stop(0.66, #395873), color-stop(0.83, #5c7c99));
	/* chrome 10+, safari 5.1+ */
	background-image:-webkit-linear-gradient(45deg, #063053, #395873, #5c7c99);
	/* firefox; multiple color stops */
	background-image:-moz-linear-gradient(45deg, #063053, #395873, #5c7c99);
	/* ie10 */
	background-image: -ms-linear-gradient(45deg, #063053 0%, #395873 100%);
	/* opera 11.1 */
	background-image: -o-linear-gradient(45deg, #063053, #395873);
	/* The "standard" */
	background-image: linear-gradient(45deg, #063053, #395873);
}

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

/* example 3 - linear rainbow */
#example3	{
	/* fallback */
	background-color:#063053;
	/* chrome 2+, safari 4+; multiple color stops */
	background-image:-webkit-gradient(linear, left bottom, left top, color-stop(0.20, red), color-stop(0.40, green), color-stop(0.6, blue), color-stop(0.8, purple), color-stop(1, orange));
	/* chrome 10+, safari 5.1+ */
	background-image:-webkit-linear-gradient(red, green, blue, purple, orange);
	/* firefox; multiple color stops */
	background-image:-moz-linear-gradient(top, red, green, blue, purple, orange);
	/* ie10 */
	background-image: -ms-linear-gradient(red, green, blue, purple, orange);
	/* opera 11.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里条件判断语句来解决这个问题：

<!--[if lt IE 10]>
<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、径向渐变
径向渐变和线性渐变的语法差不多，详情请查看//www.w3cschool.cn/css3/oj26bfli.html

渐变应用实例

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, left top, left bottom, 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:inset 0px 1px 0px 0px #ffffff;
    -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
    box-shadow:inset 0px 1px 0px 0px #ffffff;
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf));
    background:-moz-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
    background:-webkit-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
    background:-o-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
    background:-ms-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
    background:linear-gradient(to bottom, #ededed 5%, #dfdfdf 100%);
    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:1px solid #dcdcdc;
    display:inline-block;
    cursor:pointer;
    color:#777777;
    font-family:arial;
    font-size:15px;
    font-weight:bold;
    padding:6px 24px;
    text-decoration:none;
    text-shadow:0px 1px 0px #ffffff;
    margin-top: 100px;
}
.myButton:hover {
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed));
    background:-moz-linear-gradient(top, #dfdfdf 5%, #ededed 100%);
    background:-webkit-linear-gradient(top, #dfdfdf 5%, #ededed 100%);
    background:-o-linear-gradient(top, #dfdfdf 5%, #ededed 100%);
    background:-ms-linear-gradient(top, #dfdfdf 5%, #ededed 100%);
    background:linear-gradient(to bottom, #dfdfdf 5%, #ededed 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed',GradientType=0);
    background-color:#dfdfdf;
}
.myButton:active {
    position:relative;
    top:1px;
}

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

主要的代码如下：

background: radial-gradient(transparent 0, transparent 5px, #F39B00 5px);
background-size: 15px 15px;
background-position: 9px 3px;

完整代码：

CSS代码

这是公共样式
.stamp {width: 387px;height: 140px;padding: 0 10px;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: 0 0 20px 1px rgba(0, 0, 0, 0.5);z-index: -2;}
.stamp i{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: 16px 15px;width: 220px;border-right:2px dashed rgba(255,255,255,.3);text-align: left;}
.stamp .par p{color:#fff;}
.stamp .par span{font-size: 50px;color:#fff;margin-right: 5px;}
.stamp .par .sign{font-size: 34px;}
.stamp .par sub{position: relative;top:-5px;color:rgba(255,255,255,.8);}
.stamp .copy{display: inline-block;padding:21px 14px;width:100px;vertical-align: text-bottom;font-size: 30px;color:rgb(255,255,255);}
.stamp .copy p{font-size: 16px;margin-top: 15px;}

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

.stamp02{background: #D24161;background: radial-gradient(transparent 0, transparent 5px, #D24161 5px);background-size: 15px 15px;background-position: 9px 3px;}
.stamp02:before{background-color:#D24161;}

.stamp03{background: #7EAB1E;background: radial-gradient(transparent 0, transparent 5px, #7EAB1E 5px);background-size: 15px 15px;background-position: 9px 3px;}
.stamp03:before{background-color:#7EAB1E;}
.stamp03 .copy{padding: 10px 6px 10px 12px;font-size: 24px;}
.stamp03 .copy p{font-size: 14px;margin-top: 5px;margin-bottom: 8px;}
.stamp03 .copy a{background-color:#fff;color:#333;font-size: 14px;text-decoration:none;padding:5px 10px;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, #50ADD3 4px);background-size: 12px 8px;background-position: -5px 10px;}
.stamp04:before{background-color:#50ADD3;left: 5px;right: 5px;}
.stamp04 .copy{padding: 10px 6px 10px 12px;font-size: 24px;}
.stamp04 .copy p{font-size: 14px;margin-top: 5px;margin-bottom: 8px;}
.stamp04 .copy a{background-color:#fff;color:#333;font-size: 14px;text-decoration:none;padding:5px 10px;border-radius:3px;display: block;}

HTML代码

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

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

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

<div class="stamp stamp04">
<div class="par"><p>XXXXXX折扣店</p><sub class="sign">￥</sub><span>50.00</span><sub>优惠券</sub><p>订单满100.00元</p></div>
<div class="copy">副券<p>2015-08-13<br>2016-08-13</p><a href="#">立即使用</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代码
<div class="div1"></div>
<div class="div2"></div>
 
//css代码
div{
    width: 200px;
    height: 80px;
    margin: 10px;
}
.div1{
    .gradient(top, #00B7EA, #0391B3);
}
.div2{
    .quick-gradient();
}