<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
width: 200px;
height: 200px;
/*
渐变是图片,需要通过background-image来设置
线性渐变,颜色随一条直线发生变化
background-image: linear-gradient(颜色1,颜色2,……);
红色开头,黄色结尾,中间是过度区域,多个颜色的时候,默认是平均分配
指定渐变方向:
to left
to right
to bottom 默认值
to top
**deg 表示度数
background-image: repeating-linear-gradient(red,yellow); 渐变平铺
*/
/* background-image: linear-gradient(red,yellow);
background-image:linear-gradient(to top,red,yellow); */
/* background-image:linear-gradient(30deg,red,yellow ); */
/* background-image:linear-gradient(red,yellow ); */
background-image:repeating-linear-gradient(red ,yellow 1% );
}
</style>
</head>
<body>
<div class="box1">.</div>
</body>
</html>
17线性渐变——HTML
最新推荐文章于 2022-09-21 15:05:17 发布