CSS 中心渐变实现:从中间到四周的色彩过渡
我们可以使用 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 来表示透明。这样我们就可以实现从中间往四周的透明渐变效果。
原文地址: https://www.cveoy.top/t/topic/nTIm 著作权归作者所有。请勿转载和采集!