CSS3は円錐グラデーション効果を実現します

文法：

背景画像: 円錐グラデーション(位置の角度から、開始色、...、最後の色)

最初のパラメータ:

開始角度: 開始角度、オプション、デフォルトは上から下

位置: 円錐の頂点の位置

2番目のパラメータ:

start-color : 開始色を定義します

stop-color : 終了色を定義します

1. 最初のパラメータ

同様に、最初のパラメータは空にすることができ、デフォルトの角度は 0 度、円錐の中心は形状の中心点になります。例えば：

背景画像: 円錐グラデーション(#69f, #fd44ff); 

開始角度は次のように変更できます。

背景画像: 円錐グラデーション(-90度から、#69f、#fd44ff); 

円錐の中心位置を変更します。

背景画像: 円錐グラデーション(-90度から80px 120px、#69f、#fd44ff) 

2. 2番目のパラメータ

線形グラデーションや放射状グラデーションと同様に、グラデーションの色と開始位置を設定できます。受け入れられる位置パラメータはパーセンテージと角度です。例えば：

背景画像: 円錐グラデーション(#69f 10%, #fd44ff 10%);

上記のコードは次のコードと同等です:

背景画像: 円錐グラデーション(#69f 36deg, #fd44ff 36deg);

表示効果は以下のとおりです。

3. 円錐グラデーションを繰り返す

線形グラデーションや放射状グラデーションと同様に、円錐グラデーションにも繰り返しの特性があります。

背景画像: 繰り返し円錐グラデーション(#69f 0 36度, #fd44ff 36度 72度);

効果は以下のようになります。

このレンダリングは少し見覚えがありますか?

円形にしてボタンを追加すると抽選ディスクになります。

効果は以下のとおりです。

アドレス: https://codepen.io/jianxiujiucan/pen/bGddbez

コーンを使用すると、さまざまな荷重効果を作成できます。

アドレス: https://codepen.io/jianxiujiucan/pen/bGdGyKN

2回目のロードについては、自分で勉強して練習問題を書いてみてください〜

グラデーションを使用すると、さまざまな効果を作成できます。

要約する

以上が、CSS3 で実現する円錐グラデーション効果についての編集者による紹介です。皆様のお役に立てれば幸いです。