背景图像及渐变
背景图像
border 边框
background-image: 默认是全部平铺的
no-repeat 不平铺
repeat-x 横向平铺
repeat-y 纵向平铺
代码：
html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<link rel="stylesheet" href="/style.css">
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>
css：
div{
width: 800px;
height: 800px;
/*border 边框*/
border: 2px solid #2f70ff;
/*background-image: 默认是全部平铺的*/
background-image: url("/resources/qqyzml.png");
}
.div1{
/*不平铺*/
background-repeat: no-repeat;
}
.div2{
/*横向平铺*/
background-repeat: repeat-x;
}
.div3{
/*纵向平铺*/
background-repeat: repeat-y;
}
渐变
html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<link rel="stylesheet" href="../渐变/style.css">
</head>
<body>
<!-- 打字会变条纹 -->
啦啦啦啦啦
</body>
</html>
css：
body{
/*
https://www.grabient.com/
径向渐变，圆形渐变
*/
background-image: -webkit-linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
background-image: -moz-linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
background-image: -o-linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
}