box-shadow 的语法如下:
box-shadow: h-shadow v-shadow blur spread color inset;
-
第一个长度值指明了阴影水平方向的偏移,即阴影在 x 轴的位置。
值为正数时,阴影在元素的右侧;值为负数时,阴影在元素的左侧 -
第二个长度值指明了阴影竖直方向的偏移,即阴影在 y 轴的位置。
值为正数时,阴影在元素的下方;值为负数时,阴影在元素的上方 -
第三个长度值代表了阴影的模糊半径,即模糊程度,可选
-
第四个长度代表了阴影扩展半径,其值可以是正负值,如果值为正,
则整个阴影都延展扩大,反之值为负值是,则缩小 即阴影一圈的大小 -
第五个参数 color 部分的值正如你所预料的,是指阴影的颜色。
它可以是任意的颜色单元
<!DOCTYPE html>
<Html lang="zh_CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>盒子阴影</title>
<style>
div{
width: 200px;
height: 200px;
background-color:pink;
margin: 100px auto;
}
div:hover{
box-shadow: 20px 20px 10px -4px rgba(0, 0, 0, .3);
}
</style>
</head>
<body>
<div></div>
</p>
</body>
</Html>
效果展示: