CSS 径向辐射带答案

【问题标题】：CSS radial radiant bandingCSS 径向辐射带
【发布时间】：2017-01-02 14:48:24
【问题描述】：

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

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>

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

【问题讨论】：

标签： css gradient linear-gradients radial-gradients

【解决方案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%);
}

&lt;div class="whitebox"&gt;&lt;/div&gt;

或者，如果您想要一些颜色来分散更多空间，请设置两个点，但在它们之间留有间隙，例如第一种颜色为 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%);
}

&lt;div class="whitebox"&gt;&lt;/div&gt;

【讨论】：

我需要我的渐变“锐利”，边缘没有条纹。如果您使用的是 Chrome，您会注意到这一点。
@MuhammadJuma'a 您可以使用rgba(0,0,0,0) 或transparent 作为最后一种颜色。如果您能展示您正在谈论的内容的图像，那就太好了。