CSS円錐グラデーション
CSS円錐グラデーション
円錐グラデーションは、色の変化が中心点を中心に回転するグラデーションです。
円錐グラデーションを作成するには、少なくとも2つの色を定義する必要があります。
構文
background-image: conic-gradient([from angle] [at position,] color [degree], color [degree], ...);
デフォルトでは、*角度*は0度で、*位置*が中心です。
もし*角度*を指定しない場合は、中心点を中心に均等に色が広がる。
円錐グラデーション: 3色
次の例は、3色の円錐グラデーションを示しています。
円錐グラデーション:5色
次の例は、5色の円錐グラデーションを示しています。
例
5色の円錐グラデーション:
#grad {
background-image: conic-gradient(red, yellow, green, blue, black);
}
円錐グラデーション:3つの色と角度
次の例は、3つの色と各色の次数を持つ円錐グラデーションを示しています。
例
3つの色と各色の次数を持つ円錐グラデーション:
#grad {
background-image: conic-gradient(red 45deg, yellow 90deg, green 210deg);
}
円グラフを作成する
円錐グラデーションをパイのように見せるにはborder-radius: 50%を追加します。
例
#grad {
background-image: conic-gradient(red, yellow, green, blue, black);
border-radius: 50%;
}
すべての色の度数が定義された別の円グラフを次に示します。
例
#grad {
background-image: conic-gradient(red 0deg, red 90deg, yellow 90deg, yellow 180deg, green 180deg, green 270deg, blue 270deg);
border-radius: 50%;
}
開始角度を指定した円錐勾配
「 開始*角度*」は、円錐グラデーション全体を回転させる角度を指定します。
次の例は、開始角度が90度の円錐グラデーションを示しています。
例
角度からの円錐グラデーション:
#grad {
background-image: conic-gradient(from 90deg, red, yellow, green);
}
中心位置を指定した円錐勾配
[at *position*]は、円錐形グラデーションの中心位置を指定します。。
次の例は、中心位置が60%45%の円錐グラデーションを示しています。
例
中心位置が指定された円錐グラデーション:
#grad {
background-image: conic-gradient(at 60% 45%, red, yellow, green);
}
円錐勾配の繰り返し
repeating-conic-gradient()関数は、円錐勾配を繰り返すために使用されます。
例
繰り返される円錐グラデーション:
#grad {
background-image: repeating-conic-gradient(red 10%, yellow 20%);
border-radius: 50%;
}
以下は、色の開始点と色の停止点が定義された反復円錐グラデーションです。
例
開始色と終了色が定義された反復円錐グラデーション:
#grad {
background-image: repeating-conic-gradient(red 0deg 10deg, yellow 10deg 20deg, blue 20deg 30deg);
border-radius: 50%;
}
CSSグラデーション関数
次の表に、CSSグラデーション関数を示します。
|
関数 |
説明 |
|---|---|
| conic-gradient() | 円錐形のグラデーションを作成します。 (中心点を中心に)少なくとも2つの色を定義します。 |
| linear-gradient() | 線形グラデーションを作成します。(上から)少なくとも2つの色を定義します。 |
| radial-gradient() | 放射状グラデーションを作成します。(中央から端まで)少なくとも2つの色を定義します。 |
| repeating-conic-gradient() | 円錐グラデーションを繰り返します。 |
| repeating-linear-gradient() | 線形グラデーションを繰り返します。 |
| repeating-radial-gradient() | 放射状グラデーションを繰り返します。 |
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。