插件窝 干货文章 CSS线性渐变如何实现圆点状渐变背景?

CSS线性渐变如何实现圆点状渐变背景?

圆点 渐变 gradient radial 377    来源:    2025-03-21

要在CSS中实现圆点状的渐变背景,可以使用radial-gradient而不是linear-gradientradial-gradient可以创建从中心向外辐射的渐变效果,非常适合用来实现圆点状的背景。

以下是一个示例代码,展示如何使用radial-gradient来创建圆点状的渐变背景:

body {
  background: radial-gradient(circle, #ff7e5f, #feb47b);
}

在这个例子中,radial-gradient函数接受三个参数: 1. circle:指定渐变的形状为圆形。 2. #ff7e5f:渐变的起始颜色。 3. #feb47b:渐变的结束颜色。

这个代码会在页面的背景上创建一个从中心向外辐射的圆形渐变,颜色从#ff7e5f过渡到#feb47b

如果你想要创建多个圆点的效果,可以使用repeating-radial-gradient,并调整圆点的大小和间距。以下是一个示例:

body {
  background: repeating-radial-gradient(
    circle,
    #ff7e5f,
    #ff7e5f 10px,
    #feb47b 10px,
    #feb47b 20px
  );
}

在这个例子中: - circle:指定渐变的形状为圆形。 - #ff7e5f:圆点的颜色。 - #ff7e5f 10px:圆点的半径为10px。 - #feb47b 10px:圆点之间的间距为10px。 - #feb47b 20px:圆点的结束位置为20px。

这个代码会在页面的背景上创建多个圆点,每个圆点的半径为10px,圆点之间的间距为10px。

你可以根据需要调整颜色、圆点的大小和间距,以达到你想要的效果。