基本のコード仮想矩形に対して20%の大きさの水玉を設定するスタイルシート
.polka {
background-image: radial-gradient(#edeaf2 20%, rgba(255,255,255,0) 24%);
background-size: 40px 40px;
background-position: 0px 0px;
}
基本の設定放射グラデーションの位置は何も指定しないとデフォルトでオブジェクトの中心。使用色は最低2色。その混じり具合をパーセントで指定します。
注意が必要なのは円形なので100%の位置はオブジェクトが完全にぬりつぶされる位置だということ。
オブジェクトの縦横を超えてしまうということです。
基本の考え方
円形の場合は45°が基準
接する値は71% パーセント位置の考え方パーセントの位置の考え方は何パーセントまでスタート色か、何パーセントから次の色か、ということになります。その間の色が混色状態になります。
例えば radial-gradient(blue 20%, red 80%)の場合下記左のようになります。
グラデーション設定値1
グラデーション設定値2
水玉の場合、グラデは不要なので radial-gradient(blue 50%, red 50%)のように同じパーセントにします。 まあ、好みで多少のグラデはあってもいいかも。