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

Posted 2021-04-09 web前端开发

如下图所示，在网页设计中，有时候会需要用到渐变效果，渐变可以创建出类似于彩虹的视觉图案效果，在没有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; /* 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、径向渐变

渐变应用实例

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(); }

本文完~

▲长按二维码识别关注 方可免费听课