阴影的复习:box-shadow
- box-shadow:3px 3px 5px 10px #ccc inset;
- 总共四个参数:
- 第一个参数:x轴的偏移
- 第二个参数:y轴的偏移
- 第三个参数:阴影的模糊程度
- 第四个参数:阴影的延伸
- 第五个参数:阴影的颜色
- 第六个参数:内阴影
- 内阴影那个参数的位置是可以到前面的,这时有一个案例:掉血
<head>
<style>
div{
height: 300px;
width: 200px;
/* background-color: purple; */
margin: 100px auto;
box-shadow: inset 0 0 40px red;
animation: loose 1s linear infinite;
}
@keyframes loose{
from{
box-shadow: inset 0 0 40px red;
}
to{
box-shadow: none;
}
}
</style>
</head>
<html>
<div></div>
</html>
掉血.gif