肉渣教程

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 渐变

上一节 下一节