CSS3基础从零开始学习CSS径向渐变(radial-gradient)

从零开始学习CSS径向渐变(radial-gradient)

在CSS3中设置线性渐变相关的属性值可以实现和Photoshop中那样的渐变效果,在Photoshop中除了线性渐变之外,还可以设置径向渐变(如下图),通俗的说就是从圆心向四周产生的渐变,同样的,在CSS里除了线性渐变,也有径向渐变的实现方式,本文主要从基础部分分享径向渐变的相关用法。

Photoshop里的渐变类型.png

线性渐变和径向渐变的大致区别就是,线性渐变是在直线方向上的颜色变化,径向渐变则是从内到外的类似辐射状的变化:

线性渐变和径向渐变.png

下面简单的做一个径向渐变的示例:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>CSSAAA TEST DEMO</title>
<style type="text/css">
div {margin:20px;width:300px;height:300px;}
.box {background-image:radial-gradient(#f1c,#00f);}
</style>
</head>
<body>
<div id="all">
 <div class="box"></div>
</div>
</body>
</html>

这里使用了径向渐变radial-gradient这个定义,英文radial表示“辐射状的,径向的……”,这里定义了两个颜色值,分别表示渐变起始颜色(圆心)和渐变结束颜色。

CSS径向渐变1.png

CSS径向渐变除了可自定义渐变开始和结束的颜色,还可以定义渐变发生的位置,渐变的中心点以及渐变的形状和大小。

线性渐变可以使用百分比或具体长度值来定义渐变发生的位置,与线性渐变类似,径向渐变同样也可以,默认情况下渐变是均匀发生的,如果我将上面的例子做下面的调整:

.box {background-image:radial-gradient(#f1c 30%,#00f 40%);}

这时候渐变发生的位置就发生了变化,不再是均匀变化了:

CSS径向渐变2.png

同样的,如果将两种颜色的“位置值”设置为相等,则也会出现和线性渐变类似的两色拼接效果,比如:

.box {background-image:radial-gradient(#f1c 90px,#00f 90px);}

CSS径向渐变-拼接.png

刚才所做的测试都是在一个正方形的div上进行的,如果这个div不是正方形而是宽高不等的长方形,例如把高度改为200px,渐变的效果将会是:

CSS径向渐变3.png

也就是说,这时候渐变的整体形状会是一个椭圆,关于径向渐变的形状,也可以自定义是圆形还是椭圆,刚才椭圆形的渐变相当于:

.box {background-image:radial-gradient(ellipse,#f1c 30%,#00f 40%);}

如果想让这个渐变显示为圆形,则只需把ellipse这里的值替换成circle就可以了。英文ellipse的意思是椭圆,英文circle的意思是圆形。

.box {background-image:radial-gradient(circle,#f1c 30%,#00f 40%);}

这时候,即使是在宽高不等的长方形上,这个渐变也会显示为正圆形的形状:

CSS径向渐变4.png

默认情况下,径向渐变的中心点是center,而这个中心点也是可以自定义的,像背景定位属性那样,可以使用“left top”表示左上角,“right bottom”表示右下角,“center center”表示正中心(默认情况),还可以使用具体的长度值或百分比来定义渐变中心的位置,例如上面的例子,我给它改变一下中心的位置:

.box {background-image:radial-gradient(circle at 30px 50px,#f1c 30%,#00f 40%);}

这时候,渐变的中心点就发生了偏移:

CSS径向渐变5.png

同时也发现,这里的渐变半径也产生了变化,在CSS径向渐变里,半径也可以自定义为一个长度值,也可以有下面几种定义:

closest-side:从圆心到离圆心最近的边的距离;

closest-corner:从圆心到离圆心最近的角的距离;

farthest-side:从圆心到离圆心最远的边的距离;

farthest-corner:从圆心到离圆心最远的角的距离。

默认情况下,渐变的半径长度是从圆心到离圆心最远的角的距离(farthest-corner)。这里的几个定义值容易让人一头雾水,实际运用中如果使用具体的长度值来定义半径可能更容易理解,例如上面的例子,如果要定义一个155px的半径,则可以定义为:

.box {background-image:radial-gradient(circle 155px at center,#f1c 30%,#00f 40%);}

如果是椭圆形的渐变,则可以分别设置x轴和y轴方向的椭圆半径,例如:

.box {background-image:radial-gradient(ellipse 195px 120px at center,#f1c 30%,#00f 40%);}

CSS径向渐变6.png

椭圆形渐变还可以使用百分比来定义x轴和y轴方向的半径,这个百分比是相对于径向渐变容器的尺寸来计算的。

如果设置了半径,也可以不设置渐变的形状,例如椭圆形的渐变可以简化定义为:

.box {background-image:radial-gradient(200px 100px,#f1c 30%,#00f 40%);}

如果这里的半径只定义一个值,那就表示是一个圆形的渐变,例如:

.box {background-image:radial-gradient(160px,#f1c 30%,#00f 40%);}

上述几个关于径向渐变形状,半径,圆心位置的定义值,实际操作中可以灵活的通过这几个值的相互配合来达到需要的效果。

与线性渐变类似,径向渐变也可以实现多个颜色之间的渐变,例如:

.box {background-image:radial-gradient(160px,#f1c 30%,#00f 40%,#178 60%);}

CSS径向渐变多种颜色.png

同样的,也可以通过定义渐变发生的位置来实现同心圆的效果,例如:

.box {background-image:radial-gradient(160px,#f1c 30%,#00f 30%,#00f 40%,#178 40%);}

CSS径向渐变-同心圆.png

在本站学习线性渐变一文中曾提到彩虹色的渐变,但是线性渐变做出来的效果并不像真实的彩虹,而使用径向渐变实现七色彩虹的图案就相当容易了:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>CSSAAA TEST DEMO</title>
<style type="text/css">
.rainbow {
 width:500px;
 height:300px;
 background-color:#000;
 background-image:radial-gradient(ellipse 380px 320px at center 310px,
 #000 10%,#80f 25%,blue 30%,#0ff 40%,
 green 50%,yellow 60%,orange 70%,red 80%,#000 85%);
}
</style>
</head>
<body>
<div id="all">
 <div class="rainbow"></div>
</div>
</body>
</html>

CSS彩虹.png

与线性渐变类似,CSS径向渐变也可以通过repeating设置重复渐变,例如:

.box {background-image:repeating-radial-gradient(160px,blue,blue 15%,#178 15%,#178 20%);}

CSS径向渐变重复渐变.png

通常CSS径向渐变配合其他样式(如阴影,动画等)可以完成一些有趣的效果,在本站之后的文章里会做更多的实例分享……

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