CSS 円形グラデーションが負の半径を受け付けなくなりました

公開日: | カテゴリー: CSS

概要

Firefox 71 以降、接頭辞付き、接頭辞なし双方の radial-gradient() CSS 関数が、何らかの負の長さを含んだ引数を無視するようになります。これは仕様では無効とされていましたが、すべてのブラウザーが対応していました。例えば以下の宣言は今後機能しなくなります。

background-image: radial-gradient(-100px 25px, red, green);
background-image: -moz-radial-gradient(50%, -100px -10%, red, blue);
background-image: -webkit-gradient(radial, 1 2, -1.5, 50% 50%, 10000);

Google Chrome は最近のバージョンで同様の変更を行い、Safari も追従する見通しです。

参考資料