CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのグラデーションの種類

グラデーションは、2つ以上の色の組み合わせを表示します。

グラデーションの種類は次のとおりです。

グラデーションの種類

  • 線形グラデーション（下/上/左/右/対角）
  • 放射状グラデーション

例

放射状グラデーションの例を見てみましょう：

<html>
   <head>
      <style>
         #grad1 {
            height: 100px;
            width: 550px;
            background: -webkit-radial-gradient(red 5%, green 15%, pink 60%);
            background: -o-radial-gradient(red 5%, green 15%, pink 60%);
            background: -moz-radial-gradient(red 5%, green 15%, pink 60%);
            background: radial-gradient(red 5%, green 15%, pink 60%);
         }
      </style>
   </head>
   <body>
      <div id = "grad1"></div>
   </body>
</html>

  1. CSSを使用した背景画像の設定

    CSSのbackground-imageプロパティは、選択した要素の背景として画像を設定するために使用されます。 構文 CSSbackground-imageプロパティの構文は次のとおりです- Selector {    background-image: /*value*/ } 次の例は、CSSのbackground-imageプロパティ-を示しています。 例 <!DOCTYPE html> <html> <head> <style> #demo {    margin: 24px;   &

  2. CSSを使用して背景を繰り返す

    CSSのbackground-repeatプロパティは、背景画像がどのように繰り返されるかを定義するために使用されます。 構文 CSSbackground-repeatプロパティの構文は次のとおりです- Selector {    background-repeat: /*value*/ } 例 次の例は、CSSのbackground-repeatプロパティ-を示しています。 <!DOCTYPE html> <html> <head> <style> body {    background-image