TIL 002 CSS_linear-gradient

7513 ワード
linear-gradient CSS TIL テキストリンク

🎯 未使用の背景効果を熟知


線形勾配()は、直線に沿って2つ以上の色が漸進的に変化する画像を生成する関数です.
background: linear-gradient(#e66465, #9198e5);
既定では、上から下へのカラーランプ
background: linear-gradient(45deg, blue, red);
左に45度傾けた青の始点赤の終点ランプ
background: linear-gradient(45deg, blue 0 50%, red 50% 100%);
マルチポジションカラーブレークポイント:
左傾45度の左下半分は青、右上半分は赤で、2色の交点を正確に分けます.
background: linear-gradient(to left top, blue, red);
左上の一方向青色の開始赤の終了ランプ
  background: linear-gradient(red 10%, 40%, blue 90%);
始点から10%までは完全赤色で、90%から徐々に青色に移行し、最後の10%は完全青色である.しかし、赤と青の間で変換される中間点は50%ではなく34%である.
 background: linear-gradient(135deg, orange 60%, cyan);
135度傾斜軸の60%からのグラデーション
background: linear-gradient(0.25turn, #3f87a6, #ebf8e1, #f69d3c);
background: 
linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),            
linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),            
linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
background: linear-gradient(0deg, blue, green 40%, red);
色の終点:
下から上へ、青から、長さの40%から緑へ、赤はグラデーションを終了
 background: linear-gradient(to right, red 20%, orange 20% 40%, yellow 40% 60%, green 60% 80%, blue 80%);
マルチポジションカラーブレークポイントのグラデーション
dux-(4)dispatch時にデータ送信可能
どのようにBEMはカスタムCSSと大規模なアプリケーションを構築するに動作します.