1、vw和vh
vh:view-height
100vh === 视口的高度
vw:view-width
100vw === 视口的宽度
2、单位转换
没有滚动条的时候:100vw=100%
有滚动条的时候:100vw包含滚动条。
100% 刨除滚动条,剩余的空间占满
3、线性渐变
效果:
代码:
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
div{
width: 100px;
height: 100px;
border: 10px solid green;
/* 渐变 */
/* 1、支持多颜色渐变 */
/* 2、支持方向to bottom,to top,to left,to right,to top right.....*/
/* 颜色渐变默认方向 to bottom */
/* 3、支持角度的写法 */
}
.box1{
background: linear-gradient(to right,red,yellow,green,blue);
}
.box2{
background: linear-gradient(to top right,red,yellow,blue);
}
.box3{
background: linear-gradient(90deg,red,yellow);
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
4、径向渐变
别忘了浏览器内核前缀-webkit(谷歌浏览器用这个)
5、重复渐变
6、太极案例
效果:
代码:
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
body{
background-color: aqua;
}
div{
height: 200px;
width: 200px;
background: linear-gradient(white 50%,black 50%);
margin: 0 auto;
display: flex;
align-items: center;
border-radius: 50%;
}
div::before{
content: "";
display: block;
width: 100px;
height: 100px;
background:radial-gradient(white 25%,black 30%);
border-radius: 50%;
}
div::after{
content: "";
display: block;
width: 100px;
height: 100px;
background: radial-gradient(black 25%,white 30%);
border-radius: 50%;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
7、动画过渡属性