设置网页背景渐变标签:
background:linear-gradient(渐变方向,颜色1,颜色2,颜色3,.....)
渐变方向：
to top--- 从下到上
to bottom--- 从上到下
to left--- 从右到左
to right--- 从左到右
to top left--- 从右下到左上
to top right--- 从左下到右上
to bottom left--- 从右上到左下
to bottom right--- 从左上到右下
background:radial-gradient(渐变形状,颜色1,颜色2,颜色3...);
渐变形状：
circle--- 圆形
ellipse--- 椭圆形
closest-side--- 以最近边为半径的圆形
closest-corner--- 以最近边为半径的椭圆形
farthest-side--- 以最远边为半径的圆形
farthest-corner--- 以最远边为半径的椭圆形
实现盒子渐变效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
div:first-of-type{
width: 200px;
height: 400px;
background-color: antiquewhite;
text-align: center;
line-height: 400px;
}
div:last-of-type{
width: 300px;
height: 400px;
background: linear-gradient(red,yellow); /*变化在这里,background-color: aquamarine;这个是原本的 */
text-align: center;
line-height: 400px;
float: right;
}
</style>
<body>
<div>我是第一个div</div>
<div>我是第二个div</div>
</body>
</html>
效果图
实现盒子的多种颜色向右下方渐变
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
div:first-of-type{
width: 200px;
height: 400px;
background-color: antiquewhite;
text-align: center;
line-height: 400px;
}
div:last-of-type{
width: 300px;
height: 400px;
background: linear-gradient(to bottom right, green,pink,blue);
text-align: center;
line-height: 400px;
float: right;
}
</style>
<body>
<div>我是第一个div</div>
<div>我是第二个div</div>
</body>
</html>
