線形グラデーショングラデーションCSS

  1. 徐々に変化

グラデーション(グラデーション)であるCSS3定義を参照され、導入された機能Module1のCSSレベル画像を。3。それは本質的に2次元画像缶背景 - 画像リスト - スタイル - 画像の国境微着色のために。

 

  1. 勾配自体は、勾配ブロックの特定の大きさが、全く固有のサイズではありません

グラデーション効果を指定するには、単にあなたができ、これらの三つの要素を定義します。

  • グラデーションライン(勾配ライン
  • (勾配線の出発点を開始)と終点(終点
  • 始点と終点の色値

このように、色が滑らかに傾斜されている行の残りの部分を埋めるだろう。

グラデーションタイプは、幾何学的に、ことができます。

  • ライン():に対応したCSS グラデーション(線形リニアグラジエント
  • 放射線(X線)に対応するCSS ラジアル(半径方向の勾配
  • ヘリックス(螺旋):対応するCSS コーン勾配(円錐勾配

構文を入力します。

<gradient> = <linear-gradient()> | <repeating-linear-gradient()> |

             <radial-gradient()> | <repeating-radial-gradient()> |

             <conic-gradient()>  | <repeating-conic-gradient()>

  1. 勾配三つの要素:勾配ライン、開始点と終了点、色配列

構文は次のとおりです。

linear-gradient() = linear-gradient(

    [ <angle> | to <side-or-corner> ]?,

    <color-stop-list>

)

/*

参1:角度/渐变颜色走向

to top, to right, to bottom, to left,对应到<angle>分别是 0deg, 90deg, 180deg, 270deg

参2:渐变具体颜色 可接收多个颜色

*/

例えば:

公開された94元の記事 ウォン称賛29 ビュー50000 +

おすすめ

転載: blog.csdn.net/weixin_41849462/article/details/88794754