我们可以使用 radial-gradient() 函数来实现 CSS 中心渐变。具体实现如下:

div {
  background: radial-gradient(circle at center, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000);
}

在这个例子中,我们使用了 radial-gradient() 函数,该函数接受两个参数,第一个是渐变的形状,这里我们使用了 circle,表示一个圆形的渐变。第二个参数是颜色的列表,这里我们使用了七个颜色来实现从中间往四周的渐变效果。

除了使用颜色列表,我们还可以使用关键字来定义颜色渐变,例如使用 transparent 来实现透明效果。

div {
  background: radial-gradient(circle at center, transparent, #ff0000, transparent);
}

这个例子中,我们使用了 transparent 来表示透明。这样我们就可以实现从中间往四周的透明渐变效果。

CSS 中心渐变实现:从中间到四周的色彩过渡

原文地址: https://www.cveoy.top/t/topic/nTIm 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录