CSS 径向辐射带

Question

如何修复这个简单的锐利径向渐变（）的渐变条带；下面的代码

background-image: radial-gradient(at center, #838383 0%, #838383 4%, #161616 4%, #161616 15%, #222222 15%, #222222 25%, #3C3C3C 25%, #3C3C3C 40%, #111111 40%, #111111 55%, #B44B37 55%, #B44B37 100%);

.whitebox{

 width: 300px; height: 300px;
  background-image: -webkit-radial-gradient(at center, #838383 0%, #838383 4%, #161616 4%, #161616 15%, #222222 15%, #222222 25%, #3C3C3C 25%, #3C3C3C 40%, #111111 40%, #111111 55%, #B44B37 55%, #B44B37 100%);
 background-image: -moz-radial-gradient(at center, #838383 0%, #838383 4%, #161616 4%, #161616 15%, #222222 15%, #222222 25%, #3C3C3C 25%, #3C3C3C 40%, #111111 40%, #111111 55%, #B44B37 55%, #B44B37 100%);
 background-image: -o-radial-gradient(at center, #838383 0%, #838383 4%, #161616 4%, #161616 15%, #222222 15%, #222222 25%, #3C3C3C 25%, #3C3C3C 40%, #111111 40%, #111111 55%, #B44B37 55%, #B44B37 100%);
 background-image: -ms-radial-gradient(at center, #838383 0%, #838383 4%, #161616 4%, #161616 15%, #222222 15%, #222222 25%, #3C3C3C 25%, #3C3C3C 40%, #111111 40%, #111111 55%, #B44B37 55%, #B44B37 100%);
  
 background-image: radial-gradient(at center, #838383 0%, #838383 4%, #161616 4%, #161616 15%, #222222 15%, #222222 25%, #3C3C3C 25%, #3C3C3C 40%, #111111 40%, #111111 55%, #B44B37 55%, #B44B37 100%);



}

<div class="whitebox">

</div>

& 任何完全避免条带化的解决方案。

Answer 1

目前您是说使用颜色 #838383 从 0% 到 4%，颜色 #161616 从 4% 到 15% 等等。所以颜色之间没有 space 可以平滑地从一种颜色流到另一种颜色。为每种颜色只设置一个点，让渐变算法完成他的工作：

.whitebox {
  width: 300px;
  height: 300px;
  background-image: radial-gradient(at center, #838383 0%, #161616 4%, #222222 15%, #3C3C3C 25%, #111111 40%, #B44B37 55%, #B44B37 100%);
}

<div class="whitebox"></div>

或者如果你想让一些颜色传播得更多 space 设置两个点，但在两者之间留出间隙，例如第一种颜色为 0%-4%，第二种颜色为 8%-15%，依此类推在。在这种情况下，您会看到 4% 到 8% 之间的实际梯度。

您也可以像这样为黑色设置严格的界限（取决于您要实现的目标）：

.whitebox {
  width: 300px;
  height: 300px;
  background-image: radial-gradient(at center, #838383 0%, #161616 4%, #222222 15%, #3C3C3C 25%, #111111 40%, #111111 55%, #B44B37 55%, #B44B37 100%);
}

<div class="whitebox"></div>

CSS 径向辐射带

CSS radial radiant banding

css

gradient

linear-gradients

radial-gradients