CSS阴影效果（盒⼦阴影，⽂字阴影）
总结:
盒⼦阴影和⽂字阴影可以理解为，在⽬标盒⼦下⽅，有另外⼀个盒⼦，两个盒⼦的位置和⼤⼩是⼀样的，所以平时是看不见的, 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; 参数说明
参数位置参数解释例中解释
1offset-x x轴偏移 (让下⾯盒⼦左右移动位置)让下⾯盒⼦左移5px
2offset-y y轴偏移 (让下⾯盒⼦上下移动位置)让下⾯盒⼦下移8px
3blur模糊程度 (控制下⾯盒⼦的模糊程度)模糊程度
4spread阴影⼤⼩ (控制下⾯盒⼦的⼤⼩)让下⾯盒⼦宽⾼各加3px
5color颜⾊ (控制下⾯盒⼦的颜⾊)让下⾯盒⼦颜⾊为红⾊
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>
运⾏:
box shadow怎么设置
解释:
与盒⼦阴影⼤同⼩异。
参数位置参数解释例中解释
1offset-x x轴偏移 (让下⾯⽂字左右移动位置)让下⾯⽂字左移5px
2offset-y y轴偏移 (让下⾯⽂字上下移动位置)让下⾯盒⼦下移8px
3blur模糊程度 (控制下⾯⽂字的模糊程度)模糊程度
4color颜⾊ (控制下⾯⽂字的颜⾊)让下⾯⽂字颜⾊为红⾊

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。