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

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」