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{ 
 

 
\t width: 300px; height: 300px; 
 
\t \t 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%); 
 
\t 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%); 
 
\t 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%); 
 
\t 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%); 
 
\t \t 
 
\t 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

現在、0〜4％の色の#838383、4％〜15％の色#161616などが使用されています。だから、色の間にスムーズに流れるようなスペースはありません。勾配アルゴリズムは、彼の仕事をやらせるために、各色の一点のみに設定します。

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

するか、あなたには、いくつかの色は、より多くのスペースを広めにしたい場合は2点を設定したが、たとえば、間に隙間を残します最初の色は0％-4％、2番目は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>