1 径向渐变 radial-gradient
1.1 基本语法
线性渐变是沿着一条直线渐变,而径向渐变则是沿着椭圆或者圆进行渐变.其标准语法如下:
radial-gradient(position, shape, size, color-stop);
1.2 参数详细说明
position,指明径向渐变的椭圆或者圆心的位置,支持的值有:left,right,top,bottom,也可以指定 px 或者百分比,默认是图形的正中心.相应的对应关系如下:
top left at 0% 0%
top center at 0% 50%
top right at 0% 100%
right center at 100% 50%
right bottom at 100% 100%
bottom center at 100% 50%
left bottom at 100% 0%
left center at 0% 100%
center center at 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 class="easy"></div>
.easy {
width: 200px;
height: 100px;
background: radial - gradient(yellow, red);
}
以中心 (50%, 50%) 为起点,到最远角(farthest-corner),从 red 到 green,blue 的均匀渐变,效果如下图:
1.3.2 多颜色节点不均匀分布
<div class="easy2"></div>
.easy2 {
width: 200px;
height: 100px;
background: radial - gradient(yellow 5 % , red 15 % , blue 60 % );
}
1.3.3 指定渐变的形状
<div class="easy3"></div>
<div class="easy4"></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 class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
<div class="box box4"></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 class="box box10"></div>
<div class="box box11"></div>
<div class="box box12"></div>
<div class="box box13"></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 class="easy5"></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 class="easy6"></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 class="easy7"></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」
来源: https://juejin.im/post/5a6148de518825734d14aee0