CSS 径向渐变 strip

Question

如何为这个简单的锐利径向渐变()修复渐变 strip ；下面的代码

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>

& 任何避免 strip 化的解决方案。

Answer 1

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

.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>

或者，如果您希望某种颜色散布更多空间，请设置两个点，但在两者之间留出间隙，例如第一种颜色为 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>