CSS3

CSS関数

conic-gradient()

[Edge]○。→●、mdn

¶円錐グラデーション。

from <angle>

グラデーション処理の開始位置。時計の12時の位置からの角度。

<DIV style="border:1px solid red; width:100px; height:100px;
 background-image:conic-gradient(from 30deg, red, yellow, green);
">テスト
</DIV>

background-colorではできなかった

at <position>

扇形グラデーションの中心位置。

<DIV style="border:1px solid red; width:100px; height:100px;
 background-image:conic-gradient(at 20% 50%,red, yellow, green);
">テスト
</DIV>

[<color>? <angle>{1,2}?]#

<color>、<angle> これらのセット毎に、カンマで区切って指定する。from、at部との区切りにもカンマが必要。

<angle>は、1個指定した場合は終了角度。2個指定した場合は、1個目が開始角度、2個目が終了角度。

角度の切れ目が合わない場合は、ぼかされるようだ。

<DIV style="border:1px solid red; width:100px; height:100px;
 background-image:conic-gradient(red, yellow, green);
">テスト
</DIV>

<DIV style="border:1px solid red; width:100px; height:100px;
 background-image:conic-gradient(red 90deg, yellow 90deg 180deg, green 180deg 360deg);
">テスト
</DIV>

<DIV style="border:1px solid red; width:100px; height:100px;
 background-image:conic-gradient(red 80deg, yellow 100deg 180deg, green 180deg 360deg);
">テスト
</DIV>

<angle> ○

gradient 全体がこの角度で回転される。省略時の既定は、0deg になる。角度 0 の場合、<angle> の単位識別子は省略してもよい。

<position>

＝[ left | center | right ] || [ top | center | bottom ]
| [ left | center | right | <length-percentage> ]
　[ top | center | bottom | <length-percentage> ]?
| [ [ left | right ] <length-percentage> ] &&
　[ [ top | bottom ] <length-percentage> ]

gradient の gradient 中心 を決定する。値は radial-gradient() に対するときと同じに解決される。この引数が省略された場合の既定は center とする。

<color-interpolation-method>

＝in <rectangular-color-space>
| in <polar-color-space> <hue-interpolation-method>?

<angular-color-stop-list>

＝<angular-color-stop> , [ <angular-color-hint>? , ]? <angular-color-stop> ]#

<angular-color-stop>

＝<color> && <color-stop-angle>?

<angular-color-hint>

＝<angle-percentage>

<color-stop-angle>

＝<angle-percentage>{1,2}

例

関連

linear-gradient()、conic-gradient()、radial-gradient()。

repeating-linear-gradient()、repeating-conic-gradient()、repeating-radial-gradient()。

テスト