CSS3 _ CSS 渐变

CSS 渐变

CSS渐变

CSS渐变即实现两种乃至更多种指定颜色的渐变。CSS可定义如下两种渐变：

线性渐变（向上、下、左、右以及其他各方向线性渐变）
辐射性渐变（选择一个中心点，向周围辐射渐变）

CSS线性渐变

定义线性色彩渐变（Linear Gradient），至少声明两种颜色；假设被声明的颜色分别是color1和color2，则色彩渐变就是从color1渐变到color2。

具体语法

background-image: linear-gradient(direction, color1, color2, ...);

其中direction为方向，默认为从上往下，该参数可以缺省；该参数可以取值to left/to right/to top/to bottom，也可以取值四个斜角to top left/to right left/to bottom left/to bottom right，还可以取值具体的角度，比如-72deg这类。更详细的，可见下面案例。

案例1：从上往下渐变

#grad1 {
    height: 200px;
    background-color: red; /* 浏览器如果不兼容渐变，则显示红色 */
    background-image: linear-gradient(red, yellow);
}

运行一下

案例2：从左往右渐变

#grad1 {
    height: 200px;
    background-color: red; /* 浏览器如果不兼容渐变，则显示红色 */
    background-image: linear-gradient(to right, red, yellow);
}

运行一下

案例3：从左上到右下渐变

#grad1 {
    height: 200px;
    background-color: red; /* 浏览器如果不兼容渐变，则显示红色 */
    background-image: linear-gradient(to bottom right, red, yellow);
}

运行一下

案例4：使用指定角度

#grad1 {
    height: 200px;
    background-color: red; /* 浏览器如果不兼容渐变，则显示红色 */
    background-image: linear-gradient(-30deg, red, yellow);
}

运行一下

案例5：使用多种颜色

#grad1 {
    height: 200px;
    background-color: red; /* 浏览器如果不兼容渐变，则显示红色 */
    background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}

运行一下

案例6：使用透明度

#grad1 {
    height: 200px;
    background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}

运行一下

案例7：控制渐变的起始位置

在颜色名后面加上指定的长度（可以是百分比，也可以是像素加数值）即可。具体如何，可以去专否沙盒多试试~

#grad1 {
    background-image: linear-gradient(red, yellow 10%, green 20%);
}

运行一下

案例8：重复线性渐变

#grad1 {
    background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}

运行一下

CSS辐射性渐变

CSS的辐射性渐变（Radial Gradients）类似线性渐变，唯一不同的就是就是辐射性渐变的起点是一个点，而后向四周去渐变。

具体语法

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

默认情况下，从元素中心点开始，向离中心最远的角点，以椭圆形（ellipse）的形状进行颜色渐变。更详细内容参看下方各个案例~

案例1：辐射性渐变

#grad1 {
    background-image: radial-gradient(red, yellow, green);
}

运行一下

案例2：控制渐变的起始位置

#grad1 {
    background-image: radial-gradient(red 5%, yellow 15%, green 60%);
}

运行一下

案例3：设置辐射渐变的形状（ellipse/circle）

#grad1 {
    background-image: radial-gradient(circle, red, yellow, green);
}

运行一下

案例4：设置辐射性渐变的起始点

默认情况下，是以元素中心点为起始位置，如果想自定义辐射性渐变的起始点位置，可以通过at X Y的方式作为background-image的第一个取值。X和Y可以是百分比，也可以是具体的数值加单位，如“72px”这种。（X和Y其实是坐标值，X轴从左向右，Y轴从上往下）

#grad1 {
    background-image: radial-gradient(at 20px 80%, red, yellow, green);
}

运行一下

案例5：选择渐变终止的位置

默认情况下，是以离起始点最远的角点为渐变终止点。但是也可以自定义，取值范围如下：

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);
}

#grad3 {
    background-image: radial-gradient(closest-corner at 60% 55%, red, yellow, black); 
}

#grad4 {
    background-image: radial-gradient(farthest-corner at 60% 55%, red, yellow, black); 
}

运行一下

案例6：重复辐射性渐变

#grad1 {
  background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}

运行一下

CSS 渐变

推广