渐变
CSS3里面的渐变指的是背景色的渐变，它主要有三种渐变方式，分别是线性渐变，径向渐变以及圆锥渐变
? 注意：渐变虽然是一个背景色，但是它不能够设置在background-color这个属性上面，要设置在background-image这个属性上面（CSS3里面它把背景色当成一个背景图片来处理）
线性渐变
线性渐变可以理解为匀速渐变
基本线性渐变
背景颜色沿着某一个方向或某一个角度发生渐变我们叫基本线性渐变
语法格式如下
div{
/* 标准写法 */
background-image: linear-gradient(to right,blue,green,red);
/* 兼容性写法 */
background-image: -webkit-linear-gradient(right,blue,green,red);
}
标准写法与兼容写法有区别，兼容性写法里面是没有
to的关键字，同时它们的颜色相反，请看效果图
linear-gradient代表线性渐变to 方向代表沿着某一个方向发生渐变，它可以使用left/right/top/bottom来设置方向。如to right，to left top,to right bottom等- 方向的后面跟不同的颜色值，不同的颜色值之间使用逗号进行隔开
关于渐变色的位置
在上面的语法案例里面，我们可以看到三个颜色所占的区域都大小相同，其实线性渐变还可以设置每个颜色的区域大小，如下所示
.div1{
background-image: linear-gradient(to right,red 50%,blue 70%,green 100%);
}
在上面的案例里面，我们看到红色到了50%的地方，蓝色到了70%的地方，而绿色一直到最后。这样我们只需要在每个颜色的后边给这个颜色相应的结束位置就可以了
.b{
background: linear-gradient(to right,red 0% 30%,blue 30% 50%,green 50% 100%);
}
在这个案例里面，我们将这个渐变色直接在块的形式来拆分了
to right代表方向是向右red 0% 30%代表红色从0%的地方开始，到30%的地方结束blue 30% 50%代蓝色从30%的地方开始，到50%的地方结束green 50% 100%代表绿色从50%的地方开始，到100%的地方结束
关于线性渐变的方向
刚刚我们已经知道了线性渐变的基本语法
div{
/*基本写法*/
background-image:linear-gradient(to 方向,颜色1 [位置1],颜色2 [位置2],颜色3 [位置3]....)
}
位置是可以省略不写的，上面的位置是包含了开始位置与结束位置的，具体可以看上面的案例
在渐变的方向里面，它有多种方法
首先我们先把基本的四个方向列出来
.div1{
background-image: linear-gradient(to right,red,blue);
}
.div2{
background-image: linear-gradient(to left,red,blue);
}
.div3{
background-image: linear-gradient(to top,red,blue);
}
.div4{
background-image: linear-gradient(to bottom,red,blue);
}
| to right | to left | to top | to bottom |
|---|---|---|---|
 |
 |
 |
 |
从这最基本的四个方向上面我们还可以衍生出很多其它的方向
| 方向 | 名称 |
|---|---|
| to right top | 右上 |
| to right bottom | 右下 |
| to left top | 左上 |
| to left bottom | 左下 |
总体来说也就是“四面八方”
除了上面的方向以外，它还有角度也可以的
.div6{
/* 0点钟方向是0度 */
background-image: linear-gradient(45deg,red,blue);
}
0点方向是0度，沿着顺时针转一圈是360度，角度作为渐变的方向就比刚刚的“四面八方”还要强一些，它可以指向任意角度也就是可以指向任意的方向
重复线性渐变
直接看代码与效果
.div1{
background-image: linear-gradient(to right,red 10%,blue 30%);
}
.div2{
/* 重复的线性渐变 */
background-image: repeating-linear-gradient(to right,red 10%,blue 30%);
}
在下面的渐变里面，我们发现红色和蓝色在这里发生了交替的变化过程
线性渐变案例
-
现在我们通过线性渐变来实现一个进度条的效果
<style type="text/css"> .div1 { width: 400px; height: 30px; border: 1px solid black; border-radius: 15px; /* 第一步： 这个渐变比较特殊，它是从红色到红色 */ background-image: linear-gradient(to right, red, red); /* 第二步：我们设置背景图的大小 第一值代表的背景宽度，第二值代表背景高度 */ background-size: 0% 100%; /* 第三步：当背景图小于盒子的时候，默认会出现重复平铺行为repeat 所以这个时候我们设置背景图不平铺 */ background-repeat: no-repeat; } </style> <div class="div1"></div>效果图
同时我们还可以将背景图片与渐变结合在一起，实现下面的效果
background-image:
linear-gradient(to right top,rgba(255,0,0,0),rgba(255,0,0,0.6)),
linear-gradient(to left top,rgba(255,0,0,0),rgba(0,0,0,0.6)),
url(img/xm12.jpg);
径向渐变
径向渐变指的是由内部外进行一个颜色的渐变，它使用的是radial-gradient。它的语法格式如下
.div1{
/*标准写法*/
background-image:radial-gradient([渐变形状],颜色1 [位置1],颜色2 [位置2]...);
/*兼容性写法*/
background-image:-webkit-radial-gradient([渐变形状],颜色1 [位置1],颜色2 [位置2]...);
}
渐变的形状可以设置为椭圆
ellipse与圆形circle这个位置可以包含开始位置与结束位置，是一个可选值，也以不填写
现在根据上面的语法格式，我们可以试着去做一下效果
.a{
background-image: radial-gradient(blue,red,lightseagreen);
}
.b{
background: radial-gradient(blue 0% 20%,red 20% 40%,lightseagreen 40% 100%);
}
效果图
| 效果图a | 效果图b |
|---|---|
 |
 |
渐变的形状
在运用径向渐变的过程当中，我们的渐变色默认是根据元素的宽度高来进行，如果是正方行，渐变色就是一个圆的形状，如果是长方形，则是一个椭圆的形状，但晚我们仍然可以通过参数去控制
.a{
/*这里是椭圆的渐变*/
background: radial-gradient(ellipse,blue,red,lightseagreen,deeppink);
}
.b{
/*这里是圆形的渐变*/
background: radial-gradient(circle,blue,red,lightseagreen,deeppink);
}
效果图
| 效果图a【椭圆效果】 | 效果图b【圆形效果】 |
|---|---|
 |
 |
径向渐变的起点位置
在设置径向渐变的时候，一般情况下它会是从正中心的位置开始，由内向外开始进行渐变，但是我们可以设置这个渐变的起点位置，如下所示
background-image: radial-gradient(circle at 100px 100px,red,blue,yellow);
上面的代码就设置了一个圆形的径向渐变，它渐变的起点位置就在100px 100px的地方，第一个值代表横坐标，第二个值代表纵坐标，这两个值就代表了圆心的坐标。效果图如下所示
重复的径向渐变
这个原理与上面的重复线性渐变的原理是一样的，如果渐变色不能填满整个盒子的时候，就会重复进行，它的属性值也是在前面添加repeating
.a{
background: repeating-radial-gradient(red 0% 10%,blue 10% 20%,lightseagreen 20% 30%);
}
效果图
圆锥渐变
圆锥渐变使用的是conic-gradient这个属性值，它的语法格式如下
background-image:conic-gradient(颜色1 [位置1],颜色2 [位置2]......);
这个地方位置的写法与上面两个渐变位置的写法是一样的
通过上面的语法格式，我们先偿试一下
.a{
background: conic-gradient(red,blue,lightseagreen,yellow);
}
.b{
border-radius: 50%;
background: conic-gradient(red 0% 30%,blue 30% 60%,lightseagreen 60% 90%,yellow 90% 100%);
}
效果图
| 效果图a | 效果图b |
|---|---|
 |
 |
通过这个效果图，我们可以得到一个结论：圆锥渐变是从12点方向开始，顺时针开始渐变一圈
重复圆锥渐变
圆锥渐变也支持重复渐变，它与我们之前所学习的渐变一样，在前面添加repeating来完成，具体可以看下面的效果图
.a{
border-radius: 50%;
background: repeating-conic-gradient(red 0% 10%,blue 10% 20%,lightseagreen 20% 30%);
}
**小技巧：**在圆锥渐变里面，如果将开始渐变的颜色与结束渐变的颜色设置为同一个颜色，这样就会形成一个无缝衔接
.a{
background: conic-gradient(red,blue,lightseagreen,yellow);
}
.b{
background: conic-gradient(red,blue,lightseagreen,yellow,red);
}
效果图
| 效果图a | 效果图b |
|---|---|
 |
 |
案例
-
完成下图的效果
-
完成下图的效果图
-
完成如下效果图
评论区