CSS repeating-conic-gradient() 関数
CSS 関数例
繰り返す円錐グラデーションを作成する：
#grad {
background-image: repeating-conic-gradient(red 10%, yellow 20%);
}
試してみる »
定義と使い方
repeating-conic-gradient() 関数は、繰り返す円錐グラデーションを作成するために使用されます。
対応バージョン：CSS3
ブラウザサポート
表内の数字は、その関数をサポートする最初のブラウザバージョン番号を示しています。
| 関数 | |||||
|---|---|---|---|---|---|
| repeating-conic-gradient() | 69.0 | 79.0 | 83.0 | 12.1 | 56.0 |
CSS 構文
background-image: repeating-conic-gradient([from angle] [at position,] color degree, color degree, ...);
| 值 | 説明 |
|---|---|
| from angle | 省略可能。開始角度。デフォルト値は 0deg です。 |
| at position | 省略可能。中心位置。デフォルトは中央です。 |
| color degree, ..., color degree | 角グラデーションの境界点。この値には色の値と、それに続く省略可能な停止位置（0 から 360 の間の度数、または 0% から 100% の間のパーセンテージ）が含まれます。 |
その他の例
例
開始色と停止色を設定した繰り返す円錐グラデーション：
#grad {
background-image: repeating-conic-gradient(red 0deg 30deg, yellow 30deg 60deg, blue 60deg 90deg);
}
試してみる »
その他の拡張