15.5 文本阴影
text-shadow:水平阴影 垂直阴影 模糊距离 阴影颜色
注释：text-shadow属性向文本添加一个或多个阴影。该属性是逗号分隔的阴影列表，每个阴影有两个或三个长度值和一个可选的颜色值进行规定。省略的长度是0。
| 值 | 描述 |
|---|---|
| h-shadow | 必需，水平阴影的位置，允许负值。 |
| v-shadow | 必需，垂直阴影的位置，允许负值。 |
| blur | 可选，模糊的距离。 |
| color | 可选，阴影的颜色 |
描述：
- 文字阴影可以有多组值，多组之间用逗号隔开就可以
- 水平阴影正值阴影在右边，负值在左边
- 垂直阴影正值阴影在下边，负值在上边
- 模糊强度，值越大越模糊
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本阴影</title>
<style type="text/css">
.box{
font-size: 40px;
font-family: "楷体";
color: #7B68EE;
/*给文本设置阴影*/
/*text-shadow:水平阴影 垂直阴影 模糊距离 阴影颜色*/
text-shadow: 3px 3px 3px #90EE90;
}
.box_two{
font-size: 50px;
font-family: "隶书";
color: #008B00;
text-shadow: 4px 2px 2px #FF69B4,-4px -4px 3px #C1CDC1;
}
</style>
</head>
<body>
<div class="box">黑马程序员</div>
<div class="box_two">江苏科技大学JUST</div>
</body>
</html>
15.6 盒子阴影
box-shadow:水平阴影 垂直阴影 阴影的清晰度 阴影的大小 阴影的颜色 阴影的位置 inset outset(默认值)
水平阴影和处置阴影必须得写，其余的是可以省略不写的。
语法：
box-shadow: h-shadow v-shadow blur spread color inset
注释：box-shadow向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由2-4个长度值、可选的颜色值以及可选的inset关键词来规定。省略长度的值为0.
| 值 | 描述 |
|---|---|
| h-shadow | 必需，水平阴影的位置，允许负值。 |
| v-shadow | 必需，垂直阴影的位置，允许负值。 |
| blur | 可选，模糊的距离。 |
| spread | 可选，阴影的尺寸。 |
| color | 可选，阴影的颜色 |
| inset | 可选，将外部阴影(outset)改为内部阴影 |
描述：
- 盒子阴影可以有多组值，多组之间用逗号隔开就可以
- 水平阴影正值阴影在右边，负值在左边
案例一:盒子阴影
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒子阴影</title>
<style type="text/css">
.box{
width: 100px;
height: 100px;
border:1px solid #000;
/*给这个盒子设置阴影
语法格式：
box-shadow:水平阴影 垂直阴影 阴影的清晰度 阴影的大小 阴影的颜色 阴影的位置 inset outset(默认值)
*/
box-shadow: 3px 3px 3px 3px #f00,-4px -4px 2px 2px #DA70D6 inset;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
案例二：给图片设置阴影
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>给图片设置阴影</title>
<style type="text/css">
img{
box-shadow: 6px 6px 6px 6px #FFA07A;
}
</style>
</head>
<body>
<img src="../img/jyff1.jpg" alt="">
</body>
</html>
