如下图所示,在网页设计中,有时候会需要用到渐变效果,渐变可以创建出类似于彩虹的视觉图案效果,在没有CSS3之前,为了显示一个渐变需要专门制作一个图片,这种不法不但不灵活还增加请求数,而CSS3可以轻松实现网页渐变效果,用于做渐变背景、渐变导航、配合CSS3动画做特效等。在CSS3中,Gradient(渐变)分为linear-gradient(线性渐变)和radial-gradient(径向渐变)。CSS颜色线性渐变的语法在各种浏览器里的实现稍微有些不同,但最后是统一标准的:
background-image: linear-gradient(<point> || <angle>,]? <stop>, <stop> [, <stop>]*)
第一个参数是渐变起始点或角。第二个参数是一种颜色停止点(color stops)。至少需要两种颜色(起点和终点),你可以添加任意种颜色来增加颜色渐变的丰富程度。对颜色停止点的定义可以是一种颜色,或一种颜色加一个百分比:
color-stop(0.20, red)
因为CSS渐变色(Gradients)技术是CSS3里比较新的技术,属于高级的CSS功能,于是每种浏览器对这种技术的实现都添加了一些自己的特色。例如以WebKIt为渲染引擎的谷歌浏览器,就对它实现了多种语法。下面的这段代码基本包括了所有自顶向下颜色渐变的所有情况:#example1 {
background-color: #063053;
background-image:-webkit-gradient(linear, left bottom, left top, color-stop(0.32, #063053), color-stop(0.66, #395873), color-stop(0.83, #5c7c99));
background-image: -webkit-linear-gradient(#063053, #395873, #5c7c99);
background-image: -moz-linear-gradient(top,#063053, #395873, #5c7c99);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#063053", endColorstr="#395873");
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr="#063053", endColorstr="#395873")";
background-image: -ms-linear-gradient(#063053, #395873, #5c7c99);
background-image: -o-linear-gradient(#063053, #395873, #5c7c99);
background-image: linear-gradient(#063053, #395873, #5c7c99);
注意,我们首先设定了一个背景色。这个颜色是在万一用户使用的浏览器不支持CSS渐变色(Gradients)技术时使用的颜色。CSS渐变色(Gradients)技术里还支持带有角度的渐变方向,而不仅仅只有直上直下或直左直右。我们可以用下面的语法实现它:#example2 {
background-color:#063053;
background-image:-webkit-gradient(linear, left bottom, right top, color-stop(0.32, #063053), color-stop(0.66, #395873), color-stop(0.83, #5c7c99));
background-image:-webkit-linear-gradient(45deg, #063053, #395873, #5c7c99);
background-image:-moz-linear-gradient(45deg, #063053, #395873, #5c7c99);
background-image: -ms-linear-gradient(45deg, #063053 0%, #395873 100%);
background-image: -o-linear-gradient(45deg, #063053, #395873);
background-image: linear-gradient(45deg, #063053, #395873);
}
我们可以做的更复杂些….一个色彩缤纷的CSS颜色渐变?下面我们来做一个彩虹:
#example3 {
background-color:#063053;
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));
background-image:-webkit-linear-gradient(red, green, blue, purple, orange);
background-image:-moz-linear-gradient(top, red, green, blue, purple, orange);
background-image: -ms-linear-gradient(red, green, blue, purple, orange);
background-image: -o-linear-gradient(red, green, blue, purple, orange);
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( 起点方向,形状,大小,起点颜色,终点颜色);}
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下的效果
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 );
.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;
}
background: radial-gradient(transparent 0, transparent 5px, #F39B00 5px);
background-size: 15px 15px;
background-position: 9px 3px;
这是公共样式
.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>
.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();
}
本章节将为大家介绍如何使用 CSS 来布局图片。圆角图片实例圆角图片:img { border-radius: 8px;}实例椭圆形图片:img { border-ra...
弹性盒子是 CSS3 的一种新的布局模式。CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备...
CSS 列表CSS 列表属性作用如下:设置不同的列表项标记为有序列表设置不同的列表项标记为无序列表设置列表项标记为图像 列表 在 H...
HTML button 标签使用 formnovalidate 属性将停止进行对表单的验证,请参考下述示例:实例带有两个提交按钮的表单(进行验证或不...
实例HTML5 thead标签用于将表格中的表头组合起来。请参考下述示例:带有 thead、tfoot 和 tbody 元素的 HTML 表格:table border...