文章: 阅读:

CSS Gradient 渐变

CSSCSS

前言

  • CSS3 渐变（gradients）可以在两个或多个指定的颜色之间显示平稳的过渡。

  • 以前，必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），可以减少下载的时间和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。

  • CSS3 定义了两种类型的渐变（gradients）：

    • 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
    • 径向渐变（Radial Gradients）- 由它们的中心定义
函数 描述 CSS 备注 🔗
linear-gradient() 创建一个线性渐变的图像 3 🔗
radial-gradient() 用径向渐变创建图像 3 🔗
repeating-linear-gradient() 用重复的线性渐变创建图像 3 🔗
repeating-radial-gradient() 类似 radial-gradient()，用重复的径向渐变创建图像 3 🔗
  • 注意：Internet Explorer 9 及之前的版本不支持渐变。

1、线性渐变

  • 为了创建一个线性渐变，必须至少定义两种颜色节点。颜色节点即想要呈现平稳过渡的颜色。同时，也可以设置一个起点和一个方向（或一个角度）。
函数 描述 CSS 备注 🔗
linear-gradient() 创建一个线性渐变的图像 3 🔗
repeating-linear-gradient() 用重复的线性渐变创建图像 3 🔗

  • 语法

    1
    background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

1.1 实例

函数 描述 CSS 备注 🔗
linear-gradient() 创建一个线性渐变的图像 3 🔗

1.1.1 从上到下（默认情况下）

  • 下面的实例演示了从顶部开始的线性渐变。

    1
    2
    3
    4
    5
    6
    7
    <style>
        #grad1 {
            height: 200px;
            background-color: red;    /* 浏览器不支持时显示 */
            background-image: linear-gradient(red, blue);
        }
    </style>
    1
    2
    <p>从顶部开始的线性渐变。起点是红色，慢慢过渡到蓝色：</p>
    <div id="grad1"></div>

  • 效果


    从顶部开始的线性渐变。起点是红色，慢慢过渡到蓝色：



1.1.2 从左到右

  • 下面的实例演示了从左边开始的线性渐变。

    1
    2
    3
    4
    5
    6
    7
    <style>
        #grad2 {
            height: 200px;
            background-color: red; /* 浏览器不支持时显示 */
            background-image: linear-gradient(to right, red, yellow);
        }
    </style>
    1
    2
    3
    <p>从左边开始的线性渐变。起点是红色，慢慢过渡到黄色：</p>

    <div id="grad2"></div>

  • 效果


    从左边开始的线性渐变。起点是红色，慢慢过渡到黄色：



1.1.3 对角

  • 可以通过指定水平和垂直的起始位置来制作一个对角渐变，下面的实例演示了从左上角开始（到右下角）的线性渐变。

    1
    2
    3
    4
    5
    6
    7
    <style>
        #grad3 {
            height: 200px;
            background-color: red; /* 不支持线性的时候显示 */
            background-image: linear-gradient(to bottom right, red, green);
        }
    </style>
    1
    2
    3
    <p>从左上角开始（到右下角）的线性渐变。起点是红色，慢慢过渡到绿色：</p>

    <div id="grad3"></div>

  • 效果


    从左上角开始（到右下角）的线性渐变。起点是红色，慢慢过渡到绿色：



1.2 使用角度

  • 如果想要在渐变的方向上做更多的控制，可以定义一个角度，而不用预定义方向（to bottom、to top、to right、to left、to bottom right，等等）。

  • 语法

    1
    background-image: linear-gradient(angle, color-stop1, color-stop2);

  • 角度是指水平线和渐变线之间的角度，逆时针方向计算。换句话说，0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变。

  • 但是，请注意很多浏览器（Chrome、Safari、firefox 等）的使用了旧的标准，即 0deg 将创建一个从左到右的渐变，90deg 将创建一个从下到上的渐变。换算公式 90 - x = y 其中 x 为标准角度，y 为非标准角度。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    <style>
        #grad1 {
            height: 100px;
            background-color: red; /* 浏览器不支持的时候显示 */
            background-image: linear-gradient(0deg, red, yellow);
        }
        #grad2 {
            height: 100px;
            background-color: red; /* 浏览器不支持的时候显示 */
            background-image: linear-gradient(90deg, red, yellow);
        }
        #grad3 {
            height: 100px;
            background-color: red; /* 浏览器不支持的时候显示 */
            background-image: linear-gradient(180deg, red, yellow);
        }
        #grad4 {
            height: 100px;
            background-color: red; /* 浏览器不支持的时候显示 */
            background-image: linear-gradient(-90deg, red, yellow);
        }
    </style>
    1
    2
    3
    4
    5
    6
    <p>线性渐变 - 使用不同的角度</p>

    <div id="grad1" style="text-align: center;">0deg</div><br>
    <div id="grad2" style="text-align: center;">90deg</div><br>
    <div id="grad3" style="text-align: center;">180deg</div><br>
    <div id="grad4" style="text-align: center;">-90deg</div>

  • 效果


    线性渐变 - 使用不同的角度


    0deg


    90deg


    180deg


    -90deg

1.3 多颜色节点

  • 注意：当指定百分比时，颜色是不均匀分布。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    <style>
        #grad1 {
            height: 200px;
            background-color: red; /* 浏览器不支持的时候显示 */
            background-image: linear-gradient(red, green, blue); /* 标准的语法（必须放在最后） */
        }
        #grad2 {
            height: 200px;
            background-color: red; /* 浏览器不支持的时候显示 */
            background-image: linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* 标准的语法（必须放在最后） */
        }
        #grad3 {
            height: 200px;
            background-color: red; /* 浏览器不支持的时候显示 */
            background-image: linear-gradient(red 10%, green 85%, blue 90%); /* 标准的语法（必须放在最后） */
        }
        #grad4 {
            height: 55px;
            background-color: red; /* 浏览器不支持的时候显示 */
            background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); /* 标准的语法（必须放在最后） */

            text-align: center;
            margin: auto;
            color: #888888;
            font-size: 40px;
            font-weight: bold;
        }
    </style>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <p>3 个颜色结点（均匀分布）</p>
    <div id="grad1"></div>

    <p>7 个颜色结点（均匀分布）</p>
    <div id="grad2"></div>

    <p>3 个颜色结点（不均匀分布）</p>
    <div id="grad3"></div>

    <p>带有彩虹颜色和文本的线性渐变</p>
    <div id="grad4">渐变背景</div>

  • 效果


    3 个颜色结点（均匀分布）



    x7 个颜色结点（均匀分布）



    3 个颜色结点（不均匀分布）



    带有彩虹颜色和文本的线性渐变


    渐变背景

1.3.1 不均匀渐变百分比

  • 百分比表示指定颜色的标准中心线位置，百分比之间是过渡色。

  • 比如：

    1
    background: linear-gradient(red 10%, green 85%, blue 90%);

  • 其中：

    • 10% 表示 red 的颜色中心线在线性渐变方向的 10% 的位置。
    • 85% 表示 green 的颜色中心线在线性渐变方向的 85% 的位置。
    • 90% 表示 blue 的颜色中心线在线性渐变方向的 90% 的位置。
    • 10% 到 85% 是 red-green 的过渡色，85%-90% 是 green-blue 的过渡色。

  • 如果百分比位置之间有重叠会失去渐变过渡色。

  • 如果后边的百分比值小于前边的百分比值会失去渐变过渡色。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    <style>
        #grad1 {
            height: 100px;
            background-color: red; /* 浏览器不支持的时候显示 */
            background-image: linear-gradient(to right, red 10%, green 85%, blue 90%);
        }
        #grad2 {
            height: 100px;
            background-color: red; /* 浏览器不支持的时候显示 */
            background-image: linear-gradient(to right, red 0%, green 50%, blue 50%);
        }
        #grad3 {
            height: 100px;
            background-color: red; /* 浏览器不支持的时候显示 */
            background-image: linear-gradient(to right, red 0%, green 50%, blue 10%);
        }
    </style>
    1
    2
    3
    4
    5
    6
    7
    8
    <p>不均匀渐变百分比</p>
    <div id="grad1"></div>

    <p>百分比位置之间有重叠</p>
    <div id="grad2"></div>

    <p>后边的百分比值小于前边的百分比值</p>
    <div id="grad3"></div>

  • 效果


    不均匀渐变百分比



    百分比位置之间有重叠



    后边的百分比值小于前边的百分比值



1.4 透明度

  • CSS3 渐变也支持透明度（transparent），可用于创建减弱变淡的效果。

  • 为了添加透明度，使用 rgba() 函数来定义颜色节点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明。

  • 实例

    1
    2
    3
    4
    5
    6
    <style>
        #grad1 {
            height: 200px;
            background-image: linear-gradient(to right, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));
        }
    </style>
    1
    2
    <p>从左边开始的线性渐变。起点是完全透明，慢慢过渡到完全不透明的红色</p>
    <div id="grad1"></div>

  • 效果


    从左边开始的线性渐变。起点是完全透明，慢慢过渡到完全不透明的红色



1.5 重复渐变

  • repeating-linear-gradient() 函数用于重复线性渐变。
函数 描述 CSS 备注 🔗
repeating-linear-gradient() 用重复的线性渐变创建图像 3 🔗

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    <style>
        #grad1 {
            height: 200px;
            background-color: red; /* 浏览器不支持的时候显示 */
            background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
        }
        #grad2 {
            height: 200px;
            background-color: red; /* 浏览器不支持的时候显示 */
            background-image: repeating-linear-gradient(45deg, red, yellow 7%, green 10%);
        }
        #grad3 {
            height: 200px;
            background-color: red; /* 浏览器不支持的时候显示 */
            background-image: repeating-linear-gradient(190deg, red, yellow 7%, green 10%);
        }
        #grad4 {
            height: 200px;
            background-color: red; /* 浏览器不支持的时候显示 */
            background-image: repeating-linear-gradient(90deg, red, yellow 7%, green 10%);
        }
    </style>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <p>重复的线性渐变</p>

    <div id="grad1"></div>

    <p>45deg:</p>
    <div id="grad2"></div>

    <p>190deg:</p>
    <div id="grad3"></div>

    <p>90deg:</p>
    <div id="grad4"></div>

  • 效果


    重复的线性渐变



    45deg:



    190deg:



    90deg:



2、径向渐变

  • 径向渐变由它的中心定义。

  • 为了创建一个径向渐变，也必须至少定义两种颜色节点。颜色节点即想要呈现平稳过渡的颜色。同时，也可以指定渐变的中心、形状（圆形或椭圆形）、大小。默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。

函数 描述 CSS 备注 🔗
radial-gradient() 用径向渐变创建图像 3 🔗
repeating-radial-gradient() 类似 radial-gradient()，用重复的径向渐变创建图像 3 🔗

  • 语法

    1
    background-image: radial-gradient(shape size at position, start-color, ..., last-color);

2.1 实例

函数 描述 CSS 备注 🔗
radial-gradient() 用径向渐变创建图像 3 🔗

2.1.1 均匀分布（默认情况下）

  • 颜色节点均匀分布的径向渐变。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    <style>
        #grad1 {
            height: 150px;
            width: 200px;
            background-color: red; /* 浏览器不支持的时候显示 */
            background-image: radial-gradient(red, yellow, green); /* 标准的语法（必须放在最后） */
        }
    </style>
    1
    2
    <p>颜色结点均匀分布</p>
    <div id="grad1"></div>

  • 效果


    颜色结点均匀分布



2.1.2 不均匀分布

  • 颜色节点不均匀分布的径向渐变

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    <style>
        #grad1 {
            height: 150px;
            width: 200px;
            background-color: red; /* 浏览器不支持的时候显示 */
            background-image: radial-gradient(red 5%, yellow 15%, green 60%); /* 标准的语法（必须放在最后） */
        }
    </style>
    1
    2
    <p>颜色结点不均匀分布</p>
    <div id="grad1"></div>

  • 效果


    颜色结点不均匀分布



2.2 渐变形状

  • shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形（默认值）。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <style>
        #grad1 {
            height: 150px;
            width: 200px;
            background-color: red; /* 浏览器不支持的时候显示 */
            background-image: radial-gradient(red, yellow, green); /* 标准的语法（必须放在最后） */
        }
        #grad2 {
            height: 150px;
            width: 200px;
            background-color: red; /* 浏览器不支持的时候显示 */
            background-image: radial-gradient(circle, red, yellow, green); /* 标准的语法（必须放在最后） */
        }
    </style>
    1
    2
    3
    4
    5
    <p>椭圆形 Ellipse（默认）：</p>
    <div id="grad1"></div>

    <p>圆形 Circle：</p>
    <div id="grad2"></div>

  • 效果


    椭圆形 Ellipse（默认）：



    圆形 Circle：



2.3 尺寸大小关键字

  • size 参数定义了渐变的大小。它可以是以下四个值：

    • closest-side
    • farthest-side
    • closest-corner
    • farthest-corner

  • 带有不同尺寸大小关键字的径向渐变。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    <style>
        #grad1 {
            height: 150px;
            width: 150px;
            background-color: red; /* 浏览器不支持的时候显示 */
            background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);
        }
        #grad2 {
            height: 150px;
            width: 150px;
            background-color: red; /* 浏览器不支持的时候显示 */
            background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black);
        }
        #grad3 {
            height: 150px;
            width: 150px;
            background-color: red; /* 浏览器不支持的时候显示 */
            background-image: radial-gradient(closest-corner at 60% 55%, red, yellow, black);
        }
        #grad4 {
            height: 150px;
            width: 150px;
            background-color: red; /* 浏览器不支持的时候显示 */
            background-image: radial-gradient(farthest-corner at 60% 55%, red, yellow, black);
        }
    </style>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <p>closest-side：</p>
    <div id="grad1"></div>

    <p>farthest-side：</p>
    <div id="grad2"></div>

    <p>closest-corner：</p>
    <div id="grad3"></div>

    <p>farthest-corner（默认）：</p>
    <div id="grad4"></div>

  • 效果


    closest-side：



    farthest-side：



    closest-corner：



    farthest-corner（默认）：



2.4 重复渐变

  • repeating-radial-gradient() 函数用于重复径向渐变。
函数 描述 CSS 备注 🔗
repeating-radial-gradient() 类似 radial-gradient()，用重复的径向渐变创建图像 3 🔗

  • 实例

    1
    2
    3
    4
    5
    6
    <style>
        #grad1 {
            height: 200px;
            background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
        }
    </style>
    1
    2
    3
    <p>重复的径向渐变</p>

    <div id="grad1"></div>

  • 效果


    重复的径向渐变



3、浏览器支持

属性
background-image 1.0 4.0
IE9		 1.0 1.0 3.5
  • 表格中的数字表示支持该属性的第一个浏览器版本号。
  • 紧跟在 -webkit-, -ms-, -o- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

如果您觉得阅读本文对您有帮助，请用微信、支付宝 or QQ 扫码赞助，您的支持是我写作最大的动力！欢迎各位转载，但是未经作者本人同意，转载文章之后必须在文章页面明显位置给出作者和原文链接，否则保留追究法律责任的权利。

Qian Chia

Posted @ 2019-11-06 20:11


评论


文章目录
  1. 1. 前言
  2. 2. 1、线性渐变
    1. 2.1. 1.1 实例
      1. 2.1.1. 1.1.1 从上到下（默认情况下）
      2. 2.1.2. 1.1.2 从左到右
      3. 2.1.3. 1.1.3 对角
    2. 2.2. 1.2 使用角度
    3. 2.3. 1.3 多颜色节点
      1. 2.3.1. 1.3.1 不均匀渐变百分比
    4. 2.4. 1.4 透明度
    5. 2.5. 1.5 重复渐变
  3. 3. 2、径向渐变
    1. 3.1. 2.1 实例
      1. 3.1.1. 2.1.1 均匀分布（默认情况下）
      2. 3.1.2. 2.1.2 不均匀分布
    2. 3.2. 2.2 渐变形状
    3. 3.3. 2.3 尺寸大小关键字
    4. 3.4. 2.4 重复渐变
  4. 4. 3、浏览器支持
隐藏目录