CSSの線形グラデーションと放射状グラデーションの詳しい説明

第9章: グラデーションカラー

要約する

1. 線形勾配

1.1.線形グラデーションとは何ですか?

線形グラデーションは、その名前が示すように、直線のエッジから始まり、特定の方向に沿ったグラデーションです。
属性は背景で、背景のグラデーション色を指定します。

属性値は関数linear-gradient()で、()内にグラデーションしたい色を書きます。

線形グラデーションを作成するには、2 つ以上の色を指定して、スムーズな移行を行ってグラデーションカラーを形成する必要があります。さまざまな方向や角度からのグラデーションを実現したり、繰り返しのグラデーションにも使用できます。

方向が指定されていない場合、デフォルトではグラデーションの半分が上から下に始まります。

1.2 線形グラデーションの書き方

基本的な書き方
：パーセントを書かない場合、デフォルトではグラデーションカラーが均等に配置されます。

たとえば、background: linear-gradient(red, green, blue);
デフォルトでは上から下に、赤から始まり緑へのグラデーション、そして青で終わるように、3 つの色が均等に配分されます。

さまざまな色のグラデーション比率をパーセンテージで制御します

例: background: linear-gradient(red 0%, green 100%);
0% から開始し、赤のグラデーション
0 ～ 100% を使用します。赤から緑に移行し
、最後に 100% から緑に移行します。

スペシャル: レイヤーごとのグラデーション

background: linear-gradient(red 50%, blue 50%);
これは、半分が赤、半分が青であることを意味し、
実際には、background: linear-gradient(red 0%,red 50%, blue 50%,blue 100%);
0% から開始して 50% までは赤、50% から 100% までは青と同等です。

を使用してグラデーションの方向を制御します

たとえば、background: linear-gradient(to top, red, green);
「上へ」は、赤から始まり緑で終わる、下から上へという意味です。

デフォルトの方向は上から下であるため、グラデーションの方向を制御する角度を表すには deg を使用します
。たとえば、45 度は、上端を時計回りに 45 度回転することでグラデーションを開始すると理解できます。

たとえば、background: linear-gradient(45deg, pink 40%, purple 60%);
上端を時計回りに 45 度回転させて開始し、ピンクで始まり、最後にピンクで終わります。

繰り返し線形グラデーションの背景を作成するには、repeat-linear-gradient() 関数を使用します。

例: background: repeating-linear-gradient(45deg, aqua 0px, aqua 20px, blue 20px, blue 40px);
45 度回転、薄緑から開始、薄緑の 20 ピクセル部分、青の 20 ピクセル部分、繰り返し

たとえば、background: repeating-linear-gradient(red, yellow 10%, green 20%);
赤から始まり、10% に達すると黄色に徐々に変化し、20% に達すると緑に徐々に変化します。

rgba 値を使用して、透明度のあるグラデーションカラーを表現します
。透明度を追加するには、rgba() 関数を使用してカラーノードを定義します。rgba() 関数の最後のパラメータは 0 から 1 までの値で、色の透明度を定義します。0 は完全に透明、1 は完全に不透明を意味します。

のように：background: linear-gradient(to left, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>线性渐变</title>
  <style>
    .one>div,
    .two>div,
    .three>div {
      
      
      display: inline-block;
      width: 200px;
      height: 250px;
    }
    /* 线性渐变写法： */

    /* 1.基础写法  
    最少要写两种及以上的颜色 ,默认是从上到下开始渐变，平均分配渐变颜色*/
    .one>.div1 {
      
      
      /* 默认从上到下，默认从红色开始，渐变到绿色，再以蓝色结束，三者颜色，平均分配 */
      background: linear-gradient(red, green, blue);
    }
    .one>.div2 {
      
      
      background: linear-gradient(red, pink, green, blue, yellow,
          purple);
    }

    /* 2.通过百分比控制不同颜色的渐变比例 */
    .one>.div3 {
      
      
      background: linear-gradient(red 0%, green 100%);
      /* 
              一开始从0%开始用红色渐变  
              0~100%: 过渡从红色 变成绿色
              最后100%刷绿色  结尾
            */
    }
    .one>.div4 {
      
      
      /* 一半是红色  一半蓝色 */
      background: linear-gradient(red 50%, blue 50%);
    }
    .one>.div5 {
      
      
      /* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */
      background: linear-gradient(blue, green 40%, red);
    }
    .one>.div6 {
      
      
      background: linear-gradient(red 0%, red 33%, yellow 33%, yellow 66%, blue 66%, blue 100%);
      /* 用刷油漆来打比喻：
               0~20: 红色油漆
               0% 开始刷红色油漆
               20: 红色油漆停止刷
               
               20~50: 黄色油漆 
               20:开始刷黄色
               50: 停止刷黄色 
               以此类推后面 蓝色 
            */
    }


    /* 3.通过to来控制渐变方向 */
    .two>.div1 {
      
      
      /* 原本渐变色 默认都是从上到下的方向开始渐变*/
      background: linear-gradient(red, yellow, green);
    }
    .two>.div2 {
      
      
      /* to top 表示从下向上，由红色开始渐变，绿色结束 */
      background: linear-gradient(to top, red, green);
    }
    .two>.div3 {
      
      
      /* 表示从左上到右下，由红色开始渐变，绿色结束 */
      background: linear-gradient(to right bottom, red, green);
    }

    /* 4.通过deg表示角度来控制渐变方向
    因为默认方向为上到下，如45度可以理解为以最上面的边按照顺时针方向旋转45度开始渐变 */
    .two>.div4 {
      
      
      /* 以最上面的边按照顺时针方向旋转45度开始，粉色开始，最后以粉色结束渐变*/
      background: linear-gradient(45deg, pink 40%, purple 60%);
    }
    .two>.div5 {
      
      
      /* 旋转90度)*/
      background: linear-gradient(90deg, pink 40%, purple 60%);
    }

    /* 5.repeating-linear-gradient() 函数用于创建重复的线性渐变背景。 */
    .three>.div1 {
      
      
      /* 旋转45度，以浅绿色开始，20px部分的浅绿色，20px部分的蓝色，如此重复 */
      background: repeating-linear-gradient(45deg, aqua 0px, aqua 20px, blue 20px, blue 40px);
    }
    .three>.div2{
      
      
      /* 由红色开始渐变，到10%时，渐变成黄色，再到20％时渐变到绿色，如此重复 */
      background: repeating-linear-gradient(red, yellow 10%, green 20%);
    }

    /* 6. 通过rgba值，用透明度来表示渐变色 */ 
    .three>.div3 {
      
      
      /* 为了添加透明度，我们使用 rgba() 函数来定义颜色结点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明。 */
      background: linear-gradient(to left, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));
    }
  </style>
</head>
<body>
  <div class="one">
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
    <div class="div4"></div>
    <div class="div5"></div>
    <div class="div6"></div>
  </div>
  <div class="two">
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
    <div class="div4"></div>
    <div class="div5"></div>
  </div>
  <div class="three">
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
  </div>
</body>

レンダリング：
ここに画像の説明を挿入します

2. 放射状のグラデーション

放射状グラデーションとは、木の年輪のように、円の中心から外側に向かって徐々に円状に広がるグラデーションのことです。

2.1 放射状グラデーションとは何ですか?

属性値は次のとおりです。radial-gradient() 関数。() 内にグラデーションにする必要がある色を書き込みます。

放射状グラデーションの作成も 2 つ以上の色で形成されるグラデーションであり、円の中心の位置と形状を制御して放射状グラデーションを実現できます。

デフォルトでは、放射状グラデーションの中心はボックスの中心にあり、円の中心はデフォルトで楕円形です。

2.2 放射状グラデーションの書き方

基本的な書き方
：パーセントを書かない場合、デフォルトではグラデーションカラーが均等に配置されます。

たとえば、background: radial-gradient(red, green, blue);
ボックスの中心から始まり、赤、緑、青の順に、デフォルトで 3 つの色にグラデーションが割り当てられます。

さまざまな色のグラデーション比率をパーセンテージで制御します

たとえば、background: radial-gradient(red 30%, green 70%);
中心から始まり、0% ～ 30% は赤、30% ～ 70% は赤から緑のグラデーション、70% ～ 100% は緑です。

特殊: 真ん中に赤い丸があり、残りの部分は緑色です
例:background: radial-gradient(red 50%, green 50%);
実際には、background: radial-gradient(red 0%,red 50%,green 50% ,green 100%);

円の中心の方向は at で制御されます。
円の中心のデフォルトの位置はボックスの中心です。円の中心の方向は at で制御できます。

例: background: radial-gradient(at 100px 100px, red 0%, red 20%, green 20%, green 40%);
at は円の中心の方向を制御した後の値です。最初の値は水平 (左右) 方向を表します。2 番目の値は垂直 (上下) 方向であり、座標に相当します。円の中心の位置を示す平面直交座標系の位置。

円の中心の形状を制御する
円の中心の形状はデフォルトでは楕円形ですが、値を指定することで円の中心の形状を指定できます。

円の中心形状: デフォルトは楕円です円: 円

円の中心の形状が円であることを示すには、circle を直接記述することができます。円の中心の形状が楕円であることを示すには、ellipse を記述するか空白のままにすることができます。
のように：background: radial-gradient(circle at 100px 100px, red 0%, red 20%, green 20%, green 40%);

円の中心の形状は、特定のピクセル値を通じて表現できます。
例:background: radial-gradient(200px 200px at 100px 100px, red 0%, red 20%, green 20%, green 40%);
最初の 2 つのピクセル値は、円の中心の幅と高さが両方とも 200px であることを示し、円の中心であることを示します。丸。at以降の2つのピクセル値は、前述したように円の中心の位置を表します。

<style>
        div {
      
      
            display: inline-block;
            width: 200px;
            height: 200px;
        }
        /* radial-gradient():径向渐变
        默认在盒子正中心开始渐变，颜色自己平均分配由内向外渐变 */
        .div1 {
      
      
            /* 默认由盒子中心开始，红色到绿色再到蓝色，三种颜色默认分配渐变 */
            background: radial-gradient(red, green, blue);
        }

        .div2 {
      
      
            /* 中间是一个红色的圆，然后剩余部分是绿色 */
            background: radial-gradient(red 50%, green 50%);
            /* 其实就是相当于是 background: radial-gradient(red 0%,red 50%,green 50% ,green 100%); */
        }

        .div3 {
      
      
            /* 由中心开始，0%到30%是红色，30%到70%是红色渐变到绿色的渐变，70%到100%是绿色 */
            background: radial-gradient(red 30%, green 70%);
        }

        .div4 {
      
      
            /*   at是控制圆心方向 后面那个值 第一个表示 水平(左右)  第二值:  垂直(上下)方向*/
            background: radial-gradient(at 100px 100px, red 0%, red 20%, green 20%, green 40%);

        }

        .div5 {
      
      
            /* 圆心形状:默认是椭圆 ellipse   圆:circle    */
            background: radial-gradient(200px 200px at 100px 100px, red 0%, red 20%, green 20%, green 40%);
            /* 200px  圆心宽度    200高度   这两个值是用来控制圆心的形状的，如果这两个值没写默认是椭圆的圆心*/
        }

        .div6 {
      
      
            /* 圆心形状:默认是椭圆 为了更好的观察，把这个盒子设置宽高不一样 因为如果是正方形就看不出来  */
            width: 200px;
            height: 300px;
            /* 此处at前面没有写值，没写默认是椭圆形状的圆心*/
            background: radial-gradient(at 100px 100px, red 0%, red 20%, green 20%, green 40%);
        }

        .div7 {
      
      
            width: 200px;
            height: 300px;
            /* 此处at前面，指定圆心的形状*/
            background: radial-gradient(circle at 100px 100px, red 0%, red 20%, green 20%, green 40%);
            /* 可以通过circle表示圆， ellipse表示椭圆，或者用具体的两个数值来表示圆心的形状
             如： background: radial-gradient(200px 200px at 100px 100px,red 0%,red 20%,green 20%,green 40%);  
             200px： 圆心宽度    200px：圆心高度   这两个值是用来控制圆心的形状的，如果这两个值没写默认是椭圆的圆心*/
        }
    </style>
</head>
<body>
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
    <div class="div4"></div>
    <div class="div5"></div>
    <div class="div6"></div>
    <div class="div7"></div>
</body>

レンダリング：
ここに画像の説明を挿入します

要約する

上記は編集者がまとめた線形グラデーションと放射状グラデーションですが、これらは同性と異性の両方であり、2つのグラデーションの意味や表現方法、関連事例などをより詳しく解説しました。線形グラデーションと放射状グラデーションは実際には多くの場所で使用されるわけではないので、詳しく説明する必要はなく、理解するだけで十分です。様々な資料を参考にしながら、私自身の理解も踏まえて作成しておりますが、誤字・脱字がございましたら、ご指摘・修正を賜りますよう、よろしくお願い申し上げます。