CSS3-径向渐变

最新推荐文章于 2025-11-03 08:00:00 发布

原创最新推荐文章于 2025-11-03 08:00:00 发布 · 632 阅读

1 ·

CC 4.0 BY-SA版权

CSS3 专栏收录该内容

20 篇文章

订阅专栏

这篇博客介绍了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>

在这里插入图片描述