半円形グラデーションはfarthest指定

CSS3で円形グラデーションにするにはradial-gradientを指定する。

開始位置、角度、形状、サイズ、開始色、中間色、位置、終了色と指定項目が多くて分りにくいけど、作ってみると理解できる。

辺や角から半円のグラデーションを作る時に、形状の指定を「closest-corner」または「closest-side」などclosetで指定するとグラデーションが出来ず終了色で指定したベタ塗りになる。

これは、closetというのが中心からコーナー（corner）まはた辺（side）の一番近い値でグラデーションを作るので、開始位置が辺や角のゼロ距離だとグラデーションの出来る範囲もゼロ＝表示されないということ。

なので、辺や角から（位置指定がtop, left, bottom, right, 0%,100%といった場合）、形状の指定を「farthest」にすること。

半円のグラデーションができる
background: radial-gradient(left center 0deg, ellipse farthest-side, #FFF, #000);

半円のグラデーションができない
background: radial-gradient(left center 0deg, ellipse closest-side, #FFF, #000);

デフォルトが「farthest-corner」なので引っかかることは少ないと思うけど、たまたま「closest」指定で試していたらグラデーションが出来ない場合があると思ったのでメモしておく。