CSS3基础从零开始学习CSS线性渐变(linear-gradient)

从零开始学习CSS线性渐变(linear-gradient)

CSS3可以实现以往必须通过图片处理软件才能实现的效果,例如圆角和阴影等,而关于渐变的效果,在Photoshop等软件中很容易实现,同样的在CSS里也可以通过渐变的定义来完成渐变效果,本文主要是关于线性渐变的学习,下面简单的做个渐变的示例:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>CSSAAA TEST</title>
<style>
.box {width:320px;height:240px;}
.box {background:linear-gradient(orange,#FFFF00);}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

这里给这个元素块加上了一个渐变的背景,其中Linear单词翻译为线性,Gradient单词翻译为梯度变化,这里在括号里随便定义了两个颜色,显示的效果如下:

CSS线性渐变1.png

这是一个由橙色到黄色的渐变效果,默认情况下是从上到下的渐变,相当于“to bottom”,如果要定义从左到右的渐变,则可以这样定义:

background:linear-gradient(to right,orange,#FFFF00);

在括号里加了一个表示方向的参数,同样的,从右到左,则可以写成“to left”,从下到上则是“to top”。

除了这四个方向的渐变,还可以设置对角线方向的渐变,比如从左上角到右下角的渐变:

background:linear-gradient(to bottom right,orange,#FFFF00);

表示方向的参数定义两个方向,比如右上角到左下角可以写成“to bottom left”,这里的bottom和left位置不限。

除了上述可定义的八个标准方位(就像指南针上的N、E、S、W、NE、SE、SW、NW)之外,还可以自定义方位角度,格式为:

background:linear-gradient(angle,orange,#FFFF00);

这里的angle可以定义一个角度值,竖直向上的方向是0度,比如0deg表示从下到上的渐变(相当于to top),90deg表示从左到右的渐变(相当于to right),而180deg相当于默认的从上到下的渐变,这里的角度可以取负值:

CSS线性渐变2.png

注意这里关于角度的定义与Photoshop中关于角度的定义不同,在Photoshop中默认状态下是0度,但它表示从左到右(to right),竖直向上的时候为90度,也就是逆时针的方向表示正角度,顺时针表示负角度,而CSS里刚好相反,CSS里的顺时针方向表示正角度。

photoshop渐变叠加.png

线性渐变可以定义多个颜色而不只是两种颜色,例如:

background:linear-gradient(#456,#F00,yellow,#0099FF);

彩虹的7种颜色分别是红橙黄绿蓝靛紫,所以彩虹色的渐变可以定义为:

background:linear-gradient(red,orange,yellow,green,blue,indigo,violet);

在Photoshop里可以设置从某颜色到透明之间的渐变,在CSS里同样可以,例如:

background:linear-gradient(red,transparent,blue);

表示颜色的方法除了颜色名和16进制以外,通过rgba(a可以定义透明度)的方式都是可以的,例如:

background:linear-gradient(yellow,rgba(150,10,6,0.6));

CSS渐变可以让网页中平面的元素变得更立体更丰富,例如可以通过渐变制作简单的按钮或导航条的背景等,再不需要通过背景图片来完成了,请注意即使是通过渐变生成的背景,其本质还是属于背景图片而不是背景颜色,本文中采用的简写背景属性:

background:linear-gradient(red,orange);

这里如果写成下面这样也是对的:

background-image:linear-gradient(red,orange);  /*--正确的写法--*/

但如果写成下面这样就是无效的定义:

background-color:linear-gradient(red,orange);  /*--无效的定义--*/

默认情况下,渐变都是均匀的产生的,如果是在Photoshop里,可以通过渐变编辑器控制渐变发生的位置,如下图:

渐变编辑器.gif

上图的编辑器里,当拖动色块的位置时,下方的“位置”百分比值在发生变化,在CSS渐变里同样可以通过百分比设置渐变产生的位置,例如:

.box {background:linear-gradient(to right,red,blue);}

这是一个从左到右的由红到蓝的渐变:

CSS渐变-红蓝1.png

如果给红色定义一个位置,比如50%,则表示从50%的位置开始发生渐变:

.box {background:linear-gradient(to right,red 50%,blue);}

CSS渐变-红蓝2.png

对比上面一张截图就看出定义了位置之后的区别了。同样的,我给蓝色也定义一个50%的位置,看看会出现什么效果:

.box {background:linear-gradient(to right,red 50%,blue 50%);}

CSS渐变-红蓝3.png

这里红色和蓝色的渐变都在50%处开始和停止,所以得到的是一个红蓝拼接的效果,也就是渐变达到极限的位置。对于多种颜色的渐变同样可以为颜色分别添加位置值,例如:

.box {background:linear-gradient(to right,red 34%,#fff 34%,#fff 66%,blue 66%);}

CSS渐变-荷兰国旗图案.png

这时候得到的是一个红白蓝三个颜色的拼接效果,有点像有些欧洲国家的国旗图案,比如下面这两个图案就很容易通过线性渐变实现:

荷兰和法国国旗图案.png

如果欲得到循环平铺的渐变图案,线性渐变还有一种重复渐变的方法,定义方式如下:

background:repeating-linear-gradient(red,#fff 10%,#ff0 20%);

只需在渐变方法前面加上repeating即可,定义了上面这个重复渐变后,看到的是下图这样的效果:

CSS重复渐变.png

刚才提到欧洲国家的国旗样子很简单,相对来说美国国旗就复杂多了,现在不如试试做一个美国的星条旗吧。美国国旗上的横条数量是13条,所以大约在7.7%的位置会发生红色到白色的渐变,大约15.4%的位置又从白色渐变到红色,所以这个渐变可以定义为:

background:repeating-linear-gradient(#b23,#b23 7.7%,#fff 7.7%,#fff 15.4%);

设置渐变位置的参数除了用百分比之外,还可以使用具体的长度单位,如2em,20px等,比如上一条也可定义为:

 background:repeating-linear-gradient(#b23,#b23 15.4px,#fff 15.4px,#fff 30.8px);

这样就会重复的完成两种颜色的交替了,再利用伪元素在左上角加上一个蓝色的背景和50颗白色五角星就可以了,下面直接给出总体代码(尺寸比例是估算的):

CSS制作美国国旗星条旗(HTML+CSS代码)
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>CSSAAA TEST</title>
<style>
.usa {
 width:380px;height:200px;
 border:5px solid #000;
 background:repeating-linear-gradient(#b23,#b23 15.4px,#fff 15.4px,#fff 30.8px);
 position:relative;
}
.usa:before {
 content:" ";
 width:152px;height:107.8px;
 background-color:#016;
 position:absolute;
 left:0;top:0;
}
.usa span {
 position:absolute;
}
.usa span:before,.usa span:after {
 position:absolute;
 color:#fff;
 font-size:13px;
 letter-spacing:14px;
}
.usa span:before {
 content:"\2605 \2605 \2605 \2605 \2605 \2605";
 left:9px;
}
.usa span:after {
 content:"\2605 \2605 \2605 \2605 \2605";
 left:20px;top:11px;
}
.usa span.star5:after {
 content:"";
}
.usa span.star2 {
top:22px;
}
.usa span.star3 {
top:44px;
}
.usa span.star4 {
top:66px;
}
.usa span.star5 {
top:88px;
}
</style>
</head>
<body>
<div class="usa">
 <span class="star1"></span>
 <span class="star2"></span>
 <span class="star3"></span>
 <span class="star4"></span>
 <span class="star5"></span>
</div>
</body>
</html>

CSS美国国旗星条旗.png

最终得到的美国国旗图案是这样的,效果还算OK吧……

站长Colin Gao,85后自由职业者,爱钻研,爱学习网页设计。建立本站的目的是整理学习笔记,分享学习经验,认识更多的朋友。感谢您阅读本站的文章,部分内容参考了网上的一些教程,但我会尽量根据自己的理解写更多原创的东西,本站网址如下,欢迎转载:
如果方便的话,转载请注明来自:http://www.lianhefuli.cn/css3/144.html