【前端Talkking】CSS3系列-css3之径向渐变初探

2018-01-26 10:29:51来源:segmentfault作者:micstone人点击

分享
1 径向渐变radial-gradient

这是关于渐变的第二篇文章径向渐变,第一篇文章是线性渐变,有兴趣的可以看这里


1.1 基本语法

线性渐变是沿着一条直线渐变,而径向渐变则是沿着椭圆或者圆进行渐变。其标准语法如下:


radial-gradient(position, shape, size, color-stop);

1.2 参数详细说明

position,指明径向渐变的椭圆或者圆心的位置,支持的值有:left、right、top、bottom,也可以指定px或者百分比,默认是图形的正中心。相应的对应关系如下:





































top leftat 0% 0%
top centerat 0% 50%
top rightat 0% 100%
right centerat 100% 50%
right bottomat 100% 100%
bottom centerat 100% 50%
left bottomat 100% 0%
left centerat 0% 100%
center centerat 50% 50%

shape,指明径向渐变的形状,可以为circle或者ellipse,从字面意思可知,circle表示圆形,ellipse表示椭圆形。默认为ellipse。

如果设置为circle,则size不能设置为百分比,只能设置px,表示圆形的半径,例如20px circle表示圆形的半径为20px,可以用下图来描述圆形的渐变形状:

如果设置为ellipse,则size表示椭圆的水平半径和垂直半径,比如:20% 30%表示水平半径20%(相对于元素的宽),30%表示垂直半径为30%(相对于元素的高)的径向渐变,可以用下图来描述椭圆形的渐变形状:



size,表示渐变的尺寸,即渐变到哪里停止,除了支持百分比以及像素,还支持以下四个关键字,详细如下:





















关键字描述
closest-side渐变中心距离容器最近的边作为终止位置。
closest-corner渐变中心距离容器最近的角作为终止位置。
farthest-side渐变中心距离容器最远的边作为终止位置。
farthest-corner(默认)渐变中心距离容器最远的角作为终止位置。

size和position可以用at连接,例如30px 40px at center,表示以元素中心点为圆心,30px为水平半径,40px为垂直半径的椭圆型渐变。


color-stop,与线性渐变的用法相同,这里就不在赘述了。


1.3 径向渐变之案例
1.3.1 最基础的用法
<div></div>
.easy{
width: 200px;
height: 100px;
background: radial-gradient(yellow, red);
}

以中心(50%, 50%)为起点,到最远角(farthest-corner),从red到green、blue的均匀渐变,效果如下图:


1.3.2 多颜色节点不均匀分布
<div></div>
.easy2{
width: 200px;
height: 100px;
background: radial-gradient(yellow 5%, red 15%, blue 60%);
}


1.3.3 指定渐变的形状
<div></div>
<div></div>
.easy3{
display: inline-block;
width: 200px;
height: 100px;
border: 1px solid deeppink;
background: radial-gradient(circle, yellow 5%, red 15%, white 40%);
}
.easy4{
display: inline-block;
width: 200px;
height: 100px;
border: 1px solid deeppink;
background: radial-gradient(ellipse, yellow 5%, red 25%, white 40%);
}


1.3.4 指定径向渐变的位置和尺寸
使用数值指定渐变的位置和尺寸,在本例中,30px 50px指明了水平方向的渐变尺寸为30px,垂直方向上的渐变尺寸为50px,同时渐变的中心点为center或者left。
<div></div>
<div></div>
<div></div>
<div></div>
.box{
display: inline-block;
width: 200px;
height: 100px;
}
.box1{
background: radial-gradient(30px 50px at center, yellow, red);
}
.box2{
background: radial-gradient(50px 50px at center, yellow, red);
}
.box3{
background: radial-gradient(50px 30px at center, yellow, red);
}
.box4{
background: radial-gradient(20% 50% at left, yellow, red);
}


使用关键字指定渐变的位置和尺寸。在本例中,使用关键字指明了径向渐变的尺寸,相关的解释可以对着上文的具体含义。
<div></div>
<div></div>
<div></div>
<div></div>
.box{
display: inline-block;
width: 200px;
height: 100px;
}.box10{
background: radial-gradient(closest-side circle at 50% 75%, yellow, red);
}
.box11{
background: radial-gradient(closest-corner circle at 50% 75%, yellow, red);
}
.box12{
background: radial-gradient(farthest-side circle at 50% 75%, yellow, red);
}
.box13{
background: radial-gradient(farthest-corner circle at 50% 75%, yellow, red);
}


1.3.5 可累加的径向渐变背景图

径向渐变的本质也是背景图,利用背景的可叠加性,可以实现酷炫的效果,比如本例中的类似眼睛的效果图。


<div></div>
.easy5{
display: inline-block;
width: 200px;
height: 100px;
background: radial-gradient(100px 50px ellipse, transparent 40px, red 60px, transparent 61px),
radial-gradient(10px circle, #000, #000 10px, transparent 11px);
}


1.3.6 径向渐变的尺寸控制

利用background-size属性控制背景图的大小以及其本身的重复性质,我们还可以实现其的一些效果。


利用径向渐变实现复杂的纹理效果
<div></div>
.easy6{
display: inline-block;
width: 100px;
height: 200px;
background: radial-gradient(5px 10px ellipse, transparent 4px, yellow 5px, red 6px, transparent 7px),
radial-gradient(3px circle, red, red 3px, transparent 4px);
background-size: 25px;
}


利用径向渐变实现水波效果
<div></div>
.easy7{
width: 200px;
height: 100px;
background: #cd0000;
position: relative;
}
.easy7:after{
content: '';
position: absolute;
height: 10px;
left: 0;
right: 0;
bottom: -10px;
background: radial-gradient(20px 15px ellipse at top, #cd0000 10px, transparent 11px);
background-size: 20px 15px;
}


2 更多关于径向渐变的东西

除了径向渐变radial-gradient,css3中还支持重复径向渐变reapting-radial-gradient。


利用重复径向渐变实现地震波效果


利用重复径向渐变实现唱片CD效果

点这里,唱片CD效果


3 写在最后

如果想对提高自己的csss水平,推荐《CSS揭秘》,很不错额。



喜欢的话,麻烦点个赞。感谢阅读。


4 参考链接

W3C linear-gradient


深入理解CSS3 gradient斜向线性渐变


CSS3 radial-gradient径向渐变语法及辅助理解案例10则


CSS3 gradient介绍


遇见了,不妨关注下我的微信公众号「前端Talkking」


最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台