上一节:
下一节:

  CSS 渐变

  • CSS渐变

    CSS渐变可让您在两种或多种指定颜色之间显示平滑过渡。CSS定义了两种类型的渐变：
    • 线性渐变（向下/向上/向左/向右/对角线）
    • 径向梯度（由其中心定义）

  • CSS线性渐变

    要创建线性渐变，您必须至少定义两个色标。颜色停止是您想要渲染平滑过渡的颜色。您还可以设置起点和方向（或角度）以及渐变效果。

    语法

    background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
    线性渐变 - 从上到下（这是默认值） 以下示例显示从顶部开始的线性渐变。它开始是红，过渡到黄色： 
    #grad {
                                  background-image: linear-gradient(red, yellow);
                                }
    尝试一下
    线性渐变 - 从左到右 
    #grad {
                          background-image: linear-gradient(to right, red , yellow);
                        }
    尝试一下
    线性渐变 - 对角线 
    #grad {
                          background-image: linear-gradient(to bottom right, red, yellow);
                        }
    尝试一下

  • 使用角度

    如果您想要更多地控制渐变的方向，您可以定义一个角度，而不是预定义的方向（从底部，顶部，右侧，左侧，右下角等）。

    语法

    background-image: linear-gradient(angle, color-stop1, color-stop2);
    角度被指定为水平线和梯度线之间的角度。以下示例显示如何在线性渐变上使用角度： 
    #grad {
                          background-image: linear-gradient(-90deg, red, yellow);
                        }
    尝试一下

  • 使用多个颜色结束

    以下示例显示了具有多个色标的线性渐变（从上到下）： 
    #grad {
                          background-image: linear-gradient(red, yellow, green);
                        }
    尝试一下
    以下示例显示如何使用彩虹的颜色和一些文本创建线性渐变（从左到右）：
    彩虹渐变背景 
    #grad {
                          background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
                        }
    尝试一下

  • 使用透明度

    CSS渐变还支持透明度，可用于创建淡入淡出效果。为了增加透明度，我们使用rgba（）函数来定义颜色停止。rgba（）函数中的最后一个参数可以是0到1之间的值，它定义颜色的透明度：0表示完全透明，1表示全彩（无透明）。以下示例显示从左侧开始的线性渐变。它开始完全透明，过渡到全彩红色： 
    #grad {
                  background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
                }
    尝试一下

  • 重复线性渐变

    repeating-linear-gradient()函数用于重复线性渐变： 
    #grad {
                  background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
                }
    尝试一下

  • CSS径向渐变

    径向梯度由其中心定义。要创建径向渐变，还必须至少定义两个色标。

    语法

    background-image: radial-gradient(shape size at position, start-color, ..., last-color);
    默认情况下，形状为椭圆形，大小为最远角，位置为中心。 径向渐变 - 均匀间隔的颜色停止（这是默认值）以下示例显示了具有均匀间隔色标的径向渐变： 
    #grad {
                          background-image: radial-gradient(red, yellow, green);
                        }
    尝试一下
    径向渐变 - 不同间隔的颜色停止以下示例显示了具有不同间距色标的径向渐变： 
    #grad {
                                  background-image: radial-gradient(red 5%, yellow 15%, green 60%);
                                }
    尝试一下

  • 设置形状

    shape参数定义形状。它可以取值circle（圆）或ellipse（椭圆）。默认值为ellipse。以下示例显示了具有圆形形状的径向渐变： 
    #grad {
                          background-image: radial-gradient(circle, red, yellow, green);
                        }
    尝试一下

  • 使用不同大小的关键字

    size参数定义渐变的大小。它可能的四个值：
    • closest-side
    • farthest-side
    • closest-corner
    • farthest-corner
    #grad1 {
                          background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);
                        }

                        #grad2 {
                          background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black);
                        }
    尝试一下

  • 重复径向渐变

    repeating-radial-gradient()函数用于重复径向渐变： 
    #grad {
                          background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
                        }
    尝试一下

  • CSS渐变属性

    下表列出CSS渐变属性
    单位 描述
    background-image 为元素设置一个或多个背景图像

  • 相关页面

    HTML教程：HTML样式
上一节:
下一节: