CSSの放射状勾配
CSSで放射状および線形のグラデーションを簡単に定義できるようになりました。 別のソフトウェアで画像を作成する必要はもうありません。 これらは引き続きブラウザの内部で生成された画像であるため、backgroundプロパティまたは要素で定義する必要があります。また、方向と色の停止に十分な柔軟性があります。
ここでは、放射状の勾配を定義するための構文について説明します。 線形勾配については、この投稿を参照してください。
/* Simplest Case */
.box {
background: radial-gradient(black, white);
}
/* A circle as the center shape instead
of an ellipse and a 3rd color stop */
.box {
background: radial-gradient(circle, #211533, #211533,
#3e275f);
}
/* Control the size of the gradient */
.box {
background: radial-gradient(farthest-corner at 10px 10px,
#211533 40%, #3e275f);
}
.box2 {
background: radial-gradient(
farthest-side circle at 10px 10px,
#211533 40%, #3e275f);
}
グラデーションをサポートしていないブラウザのデフォルトの色
古いブロワーがフォールバックするデフォルトのベースカラーを定義することをお勧めします。
.box {
background: #211533;
background: radial-gradient(to top, #211533, #211533, #3e275f);
}
ブラウザのサポート
css-gradientsを使用できますか? caniuse.comの主要なブラウザーでのcss-gradients機能のサポートに関するデータ。