8.渐变

渐变是可以在两个或多个指定的颜色之间显示平稳的渡过。

CSS3定义了两种类型的渐变：线性渐变和径向渐变。

一、线性渐变

语法：

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

参数介绍：

参数1.direction：渐变的方向

1)渐变方向

从上到下：to bottom(默认)
从下到上：to top
从左到右: to right
从右到左: to left

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>渐变属性</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background:linear-gradient(to top,green,red,orange);
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

2)对角渐变

从左上角到右下角：to left top
从左下角到右上角：to left bottom
从右上角到左下角：to right top
从右下角到左上角：to right bottom

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>渐变属性</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background:linear-gradient(to left bottom, #ff69eb, #00ff2a, #fd7201); }
    </style>
 </head> 
<body> 
   <div></div> 
</body> 
</html>

3)角度渐变:角度+单位（deg)

语法：

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

0deg代表top

90deg代表right

180deg代表bottom(默认)

-90deg代表left

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>渐变属性</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background:linear-gradient(-90deg, #ff69eb, #00ff2a, #fd7201);
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

参数2.color:表示渐变的颜色

参数3：stop：stop的值可以是百分值也可以是像素值，表示某个颜色在stop值处停止。

background:linear-gradient(to right, green, blue 30px, pink  60px, yellow 80px,red);   

background:linear-gradient(to right, green, blue 30%, pink  60%, yellow 80%,red);

以绿色为起始颜色，渐变到30时为蓝色，渐变到60时是粉红色，到80时是黄色，到结束为红色

二、重复线性渐变

语法：

 background: repeating-linear-gradient(to left bottom,pink 0, pink 10%, red 10%,red 20%);

以粉色为起始颜色，到达10%仍然为粉色,在10%后变为红色直到20%仍为红色，然后粉色与红色循环

三、径向渐变

径向渐变由它的中心定义，至少定义两种颜色，可以指定渐变中心、形状和大小。

语法：

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

中心：top / center / bottom 默认为center中心点

形状：circle / ellipse 默认为ellipse椭圆

大小：像素或百分比，指渐变圆心向外延伸的距离

注意：定义渐变形状可以通过传入具体值进行确定，如渐变形状为圆形，则不能用百分数，椭圆百分数像素均可。

1.当传入的参数值为一个或者两个相同的值，则渐变的形状为原形

 background: radial-gradient(70px 70px,yellow 30% , #ff1e00 100%);

或直接声明形状同时加上渐变大小

background: radial-gradient(circle 70px,yellow 30% , #ff1e00 100%);

2.当传入的参数值为两个不同的值，则渐变形状为椭圆形

 background: radial-gradient(80px 30px,yellow 30% , #ff1e00 100%);

或直接声明形状同时加上渐变大小，中间用空格隔开

background: radial-gradient(ellipse 80px 60px,yellow 30% , #ff1e00 100%);

定义大小除了给定具体值或使用百分比之外，还可以用以下四个值：

closest-side:指定径向渐变的半径长度为从圆心到离圆心最近的边
closest-corner:指定径向渐变的半径长度为从圆心到离圆心最近的角
farthest-side:指定径向渐变的半径长度为从圆心到离圆心最远的边
farthest-corner:指定径向渐变的半径长度为从圆心到离圆心最远的角

以closet-corner为例：position值不能为方位值

background: radial-gradient(circle closest-corner at 70px 70px,yellow 30% , #ff1e00 100%);

定义径向位置可以用具体值、百分值或方位值，默认是渐变形状处于容器中心点

1.当position只给定一个具体值或者百分比时，则表示在水平方向上所处的位置，垂直方向默认为50%

background: radial-gradient(circle 70px at 70px,yellow 30% , #ff1e00 100%);

2.当为position只给定一个方位时，表示该圆心在该方位上的值为0，而与垂直的方向上默认为50%

background: radial-gradient(circle 70px at right,yellow 30% , #ff1e00 100%);

四、重复径向渐变

 background: repeating-radial-gradient(circle 70px ,white 0 ,white 20px, black 20px, black 40px);

重重复线性渐变是沿着一个方向上的渐变，而重复径向渐变是以圆点为中心，以放射性的方式渐变。

此博客参考了https://blog.csdn.net/HU_YEWEN/article/details/90604792这位兄台的！谢谢，多向优秀的同学学习。

posted on 2022-01-12 20:34 我不想一直当菜鸟阅读(404) 评论(0) 编辑收藏举报