Question 1

このツールはどのCSSグラデーションタイプをサポートしていますか？

Accepted Answer

このツールは3つの標準CSSグラデーションタイプをサポートします: linear-gradient（直線に沿った色のトランジション）、radial-gradient（楕円または円形状で中心から放射する色のトランジション）、conic-gradient（円グラフのように中心点周辺での色のトランジション）。繰り返し変形もコアグラデーションを抽出することでパースされます。

Question 2

CSSカラーストップとは何で、どのように機能しますか？

Accepted Answer

カラーストップはグラデーションの色とその位置を定義します。各ストップには色の値とオプションの位置（パーセントまたは長さ）があります。位置を省略するとブラウザが色を均等に分配します。linear-gradient(to right, red 0%, red 30%, blue 30%, blue 100%)は30%でシャープなトランジション（ブレンドなし）を作ります。

Question 3

CSSでグラデーションの方向をどのように指定しますか？

Accepted Answer

線形グラデーションの場合: キーワード方向（to right、to bottom）、角度（45deg、135deg）、ターン値（0.25turn）を使用します。放射状グラデーションの場合: 形状（circleまたはellipse）、サイズ、位置を指定します。コニックグラデーションの場合: 'from Ndeg'で開始角度を設定します。

Question 4

ハードカラーストップ（ブレンドなし）のグラデーションはどのように作りますか？

Accepted Answer

ハードストップを作るには、同じ位置に2つのカラーストップを配置します: linear-gradient(to right, #ff0000 50%, #0000ff 50%)。これによりグラデーションブレンドなしでシャープなエッジが作られます。

Question 5

背景、ボーダー、テキストにCSSグラデーションをどのように使用しますか？

Accepted Answer

グラデーションはCSSでは値ではなく値です。背景に使用: background: linear-gradient(...)。グラデーションテキスト: background: linear-gradient(...); -webkit-background-clip: text; color: transparent。

CSSグラデーション解析

よくある質問

Comments & Feedback