CSS 背景色 背景图片 渐变背景 - 径向渐变 background-image:radial-gradient()

radial-gradient() 用来生成径向渐变的图片

---

基础语法

background-image: radial-gradient(
	shape extent at positionX positionY,
	colorStop positionStrop,
	colorStrop_2 positonStop_2,
	……
)

参数说明

参数名称	说明	备注
shape	定义径向渐变的边缘形状 可能的值包括 circle == 圆形 ellipse == 椭圆形 形状的比例等于容器的比例
extent	定义渐变的边缘位置 也就是定义了渐变的尺寸范围 可能的值包括 farthest-side == 最远的边 [渐变的边缘同容器最远的变相切] farthest-corner == 最远的角 [渐变的边缘同容器最远的角相交] closest-side == 最近的边 [渐变的边缘同容器最近的边相切] closest-corner == 最近的角 [渐变的边缘同容器最近的角相交]
at	关键字 不可更改 若是定义了 shape 或 extent 则必须有
positionX	定义渐变的中心点相对于容器左上角的 X 轴距离 可能的值是 10px == 长度值 10% == 百分比数值
positionY	定义渐变的中心点相对于容器左上角的 Y 轴距离 可能的值是 10px == 长度值 10% == 百分比数值
colorStop	关键点的颜色
positionStop	关键点的位置	能够超过 100% 例如：200% 也是合法的

• 备注：
  • 若是有多个关键点 原则上 后面点的位置须要 > 前面点的位置

---

实例效果

• shape == circle 效果

  • 为了强化区别 渐变背限制在很是狭小的范围

  background-image: radial-gradient( circle closest-side at 50% 50%, #fff 0%, red 85%, blue 100%);

• shape == ellipse 效果

  • 为了强化区别 渐变背限制在很是狭小的范围

  background-image: radial-gradient(ellipse closest-side at 50% 50%, #fff 0%,  red 85%, blue 100% );

  background-image: radial-gradient(ellipse closest-side at 30% 30%, #fff 0%, red 85%,blue 100%);

  
  以上 两个径向渐变的惟一区别就是 圆心的位置，从中能够看到 ellipse 形状的渐变，比例是同容器的比例相同的；

---

• extent 定义边缘的位置关键字

  • extent == farthest-side 效果

  background-image: radial-gradient(ellipse farthest-side at 30% 30%, #fff  0%, red 85%, blue 100%);

  • extent == farthest-corner 效果

  background-image: radial-gradient(ellipse farthest-corner at 30% 30%, #fff 0%, red 85%, blue 100%);

  • extent == closest-side 效果

  background-image: radial-gradient(ellipse closest-side at 30% 30%, #fff 0%, red 85%,blue 100%);

  • extent == closest-corner 效果

  background-image: radial-gradient(ellipse closest-corner at 30% 30%, #fff 0%, red 85%, blue 100%);

  以上4个径向渐变的区别就是 extent 参数变化[决定了渐变的边缘也就是 关键点位置是100%的位置 ]；这个位置同 容器的尺寸共同定义到了椭圆形渐变的范围；
  关键点：
  1： 渐变形状的比例 同容器的比例相同
  2：extent 定义了渐变的边缘位置
  farthest-side == 边缘同容器的最远边相切
  farthest-corner == 边缘同容器的最远角相交；
  closet-side == 边缘同容器的最近边相切；
  closet-corner == 边缘同容器的最近交相交；

---

• positionStop 参数 > 100% 的状况

  background-image: radial-gradient(ellipse farthest-corner at 30% 30%, red 0%,blue 150%);

  
  在这种状况之下 容器的背景图片没有出现 == blue 的状况；

---

相关内容：
CSS 背景色 背景图片 渐变背景 - 线性渐变 background:linear-gradient()
CSS 背景色 背景图片 渐变背景 - 重复线性渐变 background-image: repeating-linear-gradient()