CSS3-径向渐变

径向渐变就是从一个中心点开始向四周产生渐变的效果；CSS3 中提供了实现径向渐变的 radial-gradent() 函数；使用该函数时，至少需要两个终止色。

语法：

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

• shape 用于设置径向渐变的的形状；未指定渐变形状时，会根据元素的长宽比来决定渐变的形状，位置默认居中。
  • ellipse 椭圆形
  • circle 圆形
• size 渐变的大小
• position 确定圆心的位置，可以用具体数值(可为负值)、百分比(可为负值)、方位词；如果提供2个参数，第一个表示横坐标，第二个表示纵坐标；如果只提供一个，第二值默认为50%，即 center
• start-color、last-color 渐变的起止色

CSS:

div {
  width: 200px;
  height: 200px;
  margin: 10px;
  border: 1px solid gray;
  /* 只设置了渐变终止值 */
  background-image: radial-gradient(red, yellow, orange);
}

HTML:

<div></div>

修改宽度：

width: 100px;

设置渐变大小：

/* 可以设置两个参数，一个用于设置水平方向另一个用于设置垂直方向；如果只设置一个另一个参数默认相同 */
background-image: radial-gradient(50px, red, yellow, orange)

设置渐变形状为椭圆：

background-image: radial-gradient(50px 100px, red, yellow, orange)

设置中心点的位置为左上角：

/* 通过 at 来设置中心点的位置，有两个参数，一个用于设置水平方向，另一个用于设置垂直方向；只设置水平方向时垂直方向默认居中 */
background-image: radial-gradient(50px 100px at left top, red, yellow, orange);

重复的径向渐变：

CSS3 提供了 repeating-radial-gradient() 函数，通过该函数可以实现重复的径向渐变。

语法：

background-image: repeating-radial-gradient(shape size at position, start-color, ..., last-color);

• shape 渐变的形状
• size 渐变的大小
• position 圆心位置
• start-color、last-color 渐变的起止色；必须要指定每个起止色的范围

示例：

CSS:

div {
  width: 200px;
  height: 200px;
  margin: 10px;
  border: 1px solid gray;
  background: repeating-radial-gradient(50px at center, red 20% , yellow 40%);
}

HTML:

<div></div>

来源：CSDN

作者：蓬莱老仙

链接：https://blog.csdn.net/weixin_44486539/article/details/104101102