总结:
盒子阴影和文字阴影可以理解为,在目标盒子下方,有另外一个盒子,两个盒子的位置和大小是一样的,所以平时是看不见的, box-shadow就是用来控制下面盒子的位置,大小和颜色的。
1. 盒子阴影
代码:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
div:first-child {
width: 200px;
height: 200px;
border: 1px solid black;
box-shadow: 5px 8px 3px 2px red;
}
</style>
<body>
<div></div>
</body>
</html>
运行效果:
解释:
案例中的 box-shadow: 5px 8px 3px 2px red; 参数说明
参数位置 | 参数 | 解释 | 例中解释 |
1 | offset-x | x轴偏移 (让下面盒子左右移动位置) | 让下面盒子左移5px |
2 | offset-y | y轴偏移 (让下面盒子上下移动位置) | 让下面盒子下移8px |
3 | blur | 模糊程度 (控制下面盒子的模糊程度) | 模糊程度 |
4 | spread | 阴影大小 (控制下面盒子的大小) | 让下面盒子宽高各加3px |
5 | color | 颜色 (控制下面盒子的颜色) | 让下面盒子颜色为红色 |
2.文字阴影
代码:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
div:first-child {
text-shadow: 5px 8px 3px red;
}
</style>
<body>
<div>文字阴影</div>
</body>
</html>
运行:
解释:
与盒子阴影大同小异。
参数位置 | 参数 | 解释 | 例中解释 |
1 | offset-x | x轴偏移 (让下面文字左右移动位置) | 让下面文字左移5px |
2 | offset-y | y轴偏移 (让下面文字上下移动位置) | 让下面盒子下移8px |
3 | blur | 模糊程度 (控制下面文字的模糊程度) | 模糊程度 |
4 | color | 颜色 (控制下面文字的颜色) | 让下面文字颜色为红色 |