css渐变效果

使用 CSS 渐变可以在两种颜色间制造出平滑的渐变效果。

用它代替图片，可以加快页面的载入时间、减小带宽占用。同时，因为渐变是由浏览器直接生成的，它在页面缩放时的效果比图片更好，因此你可以更加灵活、便捷的调整页面布型

类型		含义
线性渐变	linear-gradient	指在一条直线上进行渐变
径向渐变	radial-gradient	是一种从起点到终点颜色从内到外进行圆形渐变（从中间向外拉，像圆一样）

一、线性渐变

创建一个线性渐变，至少定义两种颜色节点。颜色节点即你想要呈现平稳过渡的颜色。同时，你也可以设置一个起点和一个方向（或一个角度）。

语法

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

1、线性渐变 - 从上到下(to bottom)（默认情况下）/从下到上(to top)

background: linear-gradient(#e66465, #9198e5);//从上到下

background: linear-gradient(to top, #e66465, #9198e5);//从下到上

效果图

1.png

2.png

2、线性渐变 - 从左到右（to right）/从右到左(to left)

background: linear-gradient(to right, pink, skyblue)；

background: linear-gradient(to left, pink, skyblue)；

效果图

3.png

4.png

3、线性渐变 - 对角

background: linear-gradient(to top right, rgb(238, 163, 175), rgb(149, 214, 240));

效果图

5.png

4、线性渐变 - 使用角度

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

角度展示图

6.png

语法

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

html代码块

<div class="box box1">0deg</div>
<div class="box box2">90deg</div>
<div class="box box3">180deg</div>
<div class="box box4">-90deg</div>
<div class="box box5">45deg</div>
<div class="box box6">-45deg</div>

css代码块

<style>
    * {
        margin: 0;
        padding: 0;
    }
    
    .box {
        width: 150px;
        height: 150px;
        margin: 100px auto;
        margin-left: 10px;
        float: left;
    }
    
    .box1 {
        background: linear-gradient(0deg, pink, skyblue);
    }
    
    .box2 {
        background: linear-gradient(90deg, pink, skyblue);
    }
    
    .box3 {
        background: linear-gradient(180deg, pink, skyblue);
    }
    
    .box4 {
        background: linear-gradient(-90deg, pink, skyblue);
    }
    
    .box5 {
        background: linear-gradient(45deg, pink, skyblue);
    }
    
    .box6 {
        background: linear-gradient(-45deg, pink, skyblue);
    }
</style>

效果图

7.png

5、重复的线性渐变

将线性渐变平铺显示

语法

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

html代码块

<div class="box box1">默认</div>
<div class="box box2">45deg</div>
<div class="box box3">从左到右</div>
<div class="box box4">190deg</div>

css代码块

<style>
    * {
        margin: 0;
        padding: 0;
    }
    
    .box {
        width: 150px;
        height: 150px;
        margin: 100px auto;
        margin-left: 10px;
        float: left;
    }
    
    .box1 {
        background: repeating-linear-gradient(red, yellow 10%, green 20%);
    }
    
    .box2 {
        background: repeating-linear-gradient(45deg, red, yellow 10%, green 20%);
    }
    
    .box3 {
        background: repeating-linear-gradient(to right, red, yellow 10%, green 20%);
    }
    
    .box4 {
        background: repeating-linear-gradient(190deg, red, yellow 10%, green 20%);
    }
</style>

效果图

8.png

补充：不均匀渐变百分比

百分比表示指定颜色的标准中心线位置，百分比之间是过渡色，如果百分比位置之间有重叠会失去渐变过渡色。

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 的过渡色。

二、径向渐变

创建一个径向渐变，也必须至少定义两种颜色节点。颜色节点即你想要呈现平稳过渡的颜色。

同时，你也可以指定渐变的中心、形状（圆形或椭圆形）、大小。默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。

语法

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

参数	含义	默认值
shape	定义形状（圆形或者椭圆）	ellipse（表示椭圆形）注意：容器宽高不相等
size	定义大小	farthest-corner（表示到最远的角落）
position	定义圆心的位置	center（表示在中心点）
start-color	定义开始的颜色值	必填，无默认值
last-color	定义结束的颜色值	必填，无默认值

1、普通径向渐变

颜色节点均匀分布

<style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            width: 200px;
            height: 150px;
            margin: 100px auto;
            background: radial-gradient(red, yellow, orange)
        }
    </style>

颜色节点不均匀分布

background: radial-gradient(red 5%, yellow 15%, orange 60%)

效果图

9.png

10.png

2、自定义圆心位置

background: radial-gradient(at right top, red, yellow, orange)
/*使用 at 来定义最终的圆心位置 at后面可以接代表方向的关键字 也可以使用百分值
默认是先设置水平方向的位置 然后是垂直方向 这里就表示将圆心的位置定义在右上角 
*/

效果图

11.png

3、自定义形状、自定义圆心位置

background: radial-gradient(circle at 50% 50%, red, yellow, orange)
/*这里表示的就是创建一个圆形 且该圆形的圆心位于水平方向50% 垂直方向50%的位置
*/

效果图

12.png

4、自定义径向大小

background: radial-gradient(100px 50px at 50% 50%, red, yellow, orange)
/*这里表示定义了一个水平半径为150px 垂直半径为110px 圆心的位置在水平方向50% 垂直方向50% 即居中显示*/

效果图

13.png

注意：自定义径向大小时，不能自定义形状。

自定义大小，是改变水平和垂直两个方向的半径，只有当形状是椭圆时，才能同时自定义水平和垂直方向的半径，当形状是圆时，只能调整一个方向的半径！！！