介绍
在CSS3中新增了盒子阴影,可以使用box-shadow
属性为盒子添加阴影。
语法:
box-shadow: h-shadow v-shadow blur spread color inset;
各值的含义如下:
- h-shadow:必需。水平阴影的位置,允许为负值。值越大,阴影越往右走;值越小,阴影越往左走。
- v-shadow:必需。垂直阴影的位置,允许为负值。值越大,阴影越往下走;值越小,阴影越往上走。
- blur:可选。模糊距离。就是表示了阴影的虚实程度。值越大,影子越模糊,越虚;值越小,阴影越实。
- spread:可选。阴影的尺寸。指影子的大小。值越大,阴影越大;值越小,阴影越小。
- color:可选。阴影的颜色。一般采用rgba(0, 0, 0, .3)这样的格式。
- inset:可选。内阴影还是外阴影,默认是外阴影(outset),但不可以写outset这个单词,否则将导致阴影无效。也就是说,如果写上inset,表示使用内阴影;如果不写inset,表示使用外阴影。
盒子阴影不占用空间,不会影响其它盒子排列。
示例
显示盒子的阴影
<!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>
div {
width: 200px;
height: 200px;
background-color: pink;
margin: 100px auto;
box-shadow: 10px 10px 10px 10px black;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
增大水平阴影的位置h-shadow,阴影往右走
减少水平阴影的位置h-shadow,阴影往左走
增大垂直阴影的位置v-shadow,阴影往下走
减小垂直阴影的位置v-shadow,阴影往上走
模糊距离blur越大,影子越模糊,越虚
模糊距离blur越小,影子越实
阴影spread尺寸越大,阴影越大
改变阴影的颜色
写inset,表示使用内阴影
原先盒子没有阴影,当鼠标经过盒子就添加阴影效果
<!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>
div {
width: 200px;
height: 200px;
background-color: pink;
margin: 100px auto;
}
/* 原先盒子没有阴影,当鼠标经过盒子就添加阴影效果 */
div:hover {
box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, .3);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
鼠标没有经过盒子的时候,不显示阴影:
鼠标经过盒子的时候,显示阴影: