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 渐変

参照:CSS background-image 属性

参照:CSS conic-gradient() 関数

参照:CSS linear-gradient() 関数

参照:CSS radial-gradient() 関数

参照:CSS repeating-linear-gradient() 函数

参照:CSS repeating-radial-gradient() 関数