【心得】不同 gradient 使用方式-- radial-gradient()

radial-gradient()

我从前只以为它只有圆形，只能从中心开始渐层
结果发现...不!不只是这样的!

background: radial-gradient(
         形状 范围  at 中心位置,
         颜色 色彩位置, 
         颜色 色彩位置, 
         颜色 色彩位置,
         ...);

形状：

• ellipse 椭圆形 (预设)
  

• circle 圆形
  

范围

椭圆跟圆形非常好理解~接下来这四个范围要稍微思考一下罗!
先让我们看一下MDN上渐变的组成图

请注意100%是指渐变的结束位置

再来复习一下香蕉(?)跟相切的差异!

然後就可以开始看这四个神奇的属性了~
(这边我没有设定形状，因此都是预设的椭圆ellipse)

• closest-side 与最近的边"相切"(注意渐层结束位置会去碰四边的线)
  

• closest-corner 与最近的角"相交"(注意渐层结束位置会去碰四边的角)
  

• farthest-side 与最远的边"相切"
  

• farthest-corner 与最远的角"相交"
  

ㄟㄟㄟ~看到这里可能开始有感觉到side跟corner的差别了
可是没有办法感觉到closest跟farthest的差别在哪(|||ﾟдﾟ)

嘿~请继续往下↓↓↓↓↓↓↓

at 中心位置：

• center (预设)
• (top / bottom / left / right)
• (top/bottom/left/right/center)　(top/bottom/left/right/center)
• px
• %
  刚刚的例子，当我设定了中心位置之後，就可以看出closest跟farthest的差别啦!
  

需要实际感受请来看看codepen
OS: JS没有写得很好XD

色彩&色彩位置：同linear-gradient

颜色：

• RGB
• RGBA
• HSL
• HSLA
• 关键字(red / blue / yellow / transparent...)

色彩位置：

• px
• %

参考资料：

https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/radial-gradient()