CSS repeating-conic-gradient() 関数
定義と用法
CSS repeating-conic-gradient()
この関数は重複した錐形グラデーションに使用されます。
例:
錐形グラデーション | 重複した錐形グラデーション |
---|---|
conic-gradient(red, yellow); | repeating-conic-gradient(red 10%, yellow 20%); |
例
例 1
重复円錐形の渐変:
#grad { background-image: repeating-conic-gradient(red 10%, yellow 20%); }
例 2
色の起点と終点を定義した重复円錐形の渐変:
#grad { background-image: repeating-conic-gradient(red 0 30deg, yellow 30deg 60deg, blue 60deg 90deg); }
例 3
スタート角度と中心位置を設定した別の重复円錐形の渐変:
#grad1 { background-image: repeating-conic-gradient(from 10deg at 30% 30%, red 0 30deg, yellow 30deg 60deg, blue 60deg 90deg); }
CSS 文法
repeating-conic-gradient([from angle][at position,] color degree, color degree, ... );
値 | 説明 |
---|---|
from angle |
オプション。円錐形の全体がこの角度で回転します。 デフォルト値は 0deg です。 |
at position |
オプション。円錐形の中心点を指定します。 デフォルト値は center です。 |
color degree, ... , color degree |
色の終了点は、そこで滑らかな遷移を表示したい色です。 この値は、色値と一つまたは二つのオプションの停止位置(0 から 360 度の角度または 0% から 100% のパーセンテージ)で構成されています。 |
技術的詳細
バージョン: | CSS Images Module Level 4 |
---|
ブラウザのサポート
テーブルの数字は、この関数を完全にサポートする最初のブラウザのバージョンを示しています。
Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|
69 | 79 | 83 | 12.1 | 56 |
関連ページ
チュートリアル:CSS 渐変