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);
}
中心位置を指定した円錐勾配
[で*位置*]は、円錐グラデーションの中心を指定します。
次の例は、中心位置が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() | 放射状グラデーションを繰り返します |
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。