<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>线性渐变</title>
<style>
/*
通过渐变可以设置一些复杂的背景颜色,可以实现从一个颜色向其他颜色过度的效果
!!渐变是图片,需要通过background-image来设置
线性渐变,颜色沿着一条直线发生变化
linear-gradient()
linear-gradient(red,yellow)红色在开头,黄色在结尾,中间是过渡区域
- 线性渐变的开头,我们可以指定一个渐变的方向
to left
to right
to bottom 默认值
to top
xxxdeg表示度数
- 渐变可以同时指定多个颜色,多个颜色默认情况下平均分布
background-image: linear-gradient(red,yellow,orange,#bfa);
也可以手动指定渐变的分布情况
background-image: linear-gradient(red 50px,yellow,orange,#bfa);
- background-image: repeating-linear-gradient();可以平铺的线性渐变
*/
.box1 {
width: 200px;
height: 200px;
/* background-image: linear-gradient(red,yellow); */
background-image: repeating-linear-gradient();
}
</style>
</head>
<body>
<div class="box1">
</div>
</body>
</html>
73线性渐变
最新推荐文章于 2023-12-14 16:26:13 发布