<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒子阴影</title>
<style>
.box{
width:200px;
height:200px;
border:1px solid black;
float:left;
}
#box1{
/*默认从上到下渐变*/
background-image:linear-gradient(cornflowerblue,pink);
}
#box2{
/* 表示从0到50是纯蓝色，从50开始才向粉色渐变 粉色从100开始是纯色*/
background-image:linear-gradient(cornflowerblue 50px,pink 100px);
}
#box3{
/*可以设置渐变的角度*/
background-image:linear-gradient(45deg,cornflowerblue 50px,pink 100px);
}
#box4{
background-image:linear-gradient(to bottom,cornflowerblue 50px,pink 100px);
}
#box5{
background-image:linear-gradient(to left bottom,cornflowerblue 50px,pink 100px);
}
#box6{
/*不指定数值的线性渐变*/
background-image:linear-gradient(45deg,skyblue,pink,greenyellow,orange,red);
}
#box7{
/*指定值的线性渐变*/
background-image:linear-gradient(45deg,skyblue 30px,pink 60px,greenyellow 100px,orange 120px);
}
/*渐变的颜色值可以写任何的类型，包括带alpha通道的值（例如rgba() 和transparent等关键字）
因此，完全可以从不透明度为零的颜色开始(或到不透明度为零的颜色终止)，实现部分淡出的渐变效果。*/
#box8{
/*rgb值到transparent的变化*/
background-image:linear-gradient(to right,rgb(0,230,0),transparent);
}
#box9{
/*可以平铺的线性渐变*/
background-image:repeating-linear-gradient(skyblue,pink,greenyellow,orange,red)
}
#box10{
/*可以平铺的线性渐变*/
background-image:repeating-linear-gradient(skyblue 10px ,pink 20px ,greenyellow 30px,orange 40px,red 50px)
}
</style>
</head>
<body>
<div class="box" id="box1"></div>
<div class="box" id="box2"></div>
<div class="box" id="box3"></div>
<div class="box" id="box4"></div>
<div class="box" id="box5"></div>
<div class="box" id="box6"></div>
<div class="box" id="box7"></div>
<div class="box" id="box8"></div>
<div class="box" id="box9"></div>
<div class="box" id="box10"></div>
</body>
</html>
知识点
/*通过渐变可以设置一些复杂的背景颜色，可以实现从一个颜色向其他颜色过渡的效果 渐变是图片，需要通过background-image设置*/
/*设置线性渐变，颜色沿着一条直线发生变化 linear-gradient() 线性渐变的，我们可以指定一个渐变的方向
to left (方向需要写to)
to right
to tbottom
to top （渐变的默认效果是top)
xxxdeg deg表示度数(不需要写to)
to top left 可以有个复杂的组合
渐变可以同时指定多个颜色，多个颜色默认情况下平均分布 也可以手动指定渐变的分布情况
表示从0到50是纯红色，从50开始才向黄色渐变 黄色从70开始是纯色
background-image: linear-gradient(red 50px,yellow 70px);
background-image: linear-gradient(red,yellow); //简单的写法
除了写像素值，还可以写百分比 渐变中的颜色值可以使用任何类型，包括带 alpha 通道的值（例如rgba() 和transparent等关键字）。
因此，完全可以从不透明度为零的颜色开始(或到不透明度为零的颜色终止)，实现部分淡出的渐变效果。
background-image: linear-gradient(45deg,rgba(200,200,200,.3),rgba(230,230,240,.4));
色标位置的长度值不限于px，任何长度值都可以，em、cm和英寸等都能用。此外，在同一个渐变中甚至可以混用不同的单位，但是一般不推荐这么做，如果愿意，还可以使用负的长度值，不过那样就会出现裁剪的情况，0px之前的颜色会被剪掉
既然我们能每隔几十px放一个颜色，那我们同样也能用百分数值放置颜色，位于50%处的颜色在盒子的中点
![[2023-年度总结]凡是过往,皆为序章](https://img-blog.csdnimg.cn/img_convert/ef44e2ff2e876a215d57f22ef2d9dfc5.png)
![Elasticsearch可视化平台Kibana [ES系列] - 第498篇](https://img-blog.csdnimg.cn/img_convert/f41c43d2c5233cc15a21df8108b1ba21.png)
