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％，依此类推。因此，颜色之间没有空间可以顺畅地从一个颜色流到另一个颜色。每种颜色只设置一个点，让梯度算法完成他的工作：

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

CSS径向辐射带

1 个答案: