一，盒子阴影
我们可以设置盒子的阴影效果，可以使盒子更加美观；语法格式box-shadow：水平阴影 | 垂直阴影 | 模糊距离 | 阴影颜色 内/外阴影；
h-shadow：必需填写，水平阴影的位置，允许为负值
v-shadow：必需填写，垂直阴影的位置，允许为负值
blur：模糊距离，可以不必填写 spread：阴影的颜色， inset/outset 分别为内阴影和外阴影 默认为外阴影
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子阴影</title>
<style>
.box1{
width:100px;
height:100px;
background: darkred;
box-shadow: 5px 5px 5px 4px red ; /*前面四参数分别是 阴影相对于初始位置的位置,第三个值是阴影的模糊
程度,第四个值是阴影的大小*/
}
</style>
</head>
<body>
<div class="box1">
这是一个盒子
</div>
</body>
</html>
二，精灵技术
当加载网页的时候，用户需要向服务器发送请求，网页上的每张图片一次一次请求才能展现给用户，当网页中的图片过多的时候那请求的次数也会增加，这样网站的加载时间就会过长，为了提高网页的加载速度，就出现了精灵技术。
精灵技术的本质就是，将若干张图片放到同一张大图上，通过北京图片定位的方式，将大图定位到合适的位置，得到需求背景图片，多个元素公用同一张背景图片，这样通过一次请求得到的图片多个盒子使用。
需求：下面我用这张图片作为背景图片，通过定位的方式在三个盒子中显示我的首字母：XHB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>精灵技术</title>
<style>
div{
width: 106px;
height: 116px;
}
.box1{
background: url("./images/abcd.jpg") -252px -561px;
}
.box2{
background: url("./images/abcd.jpg") -219px -143px;
}
.box3{
background: url("./images/abcd.jpg") -112px -13px;
width:110px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>结果如下
三，滑动门
当多个不同宽度盒子公用同一风格的背景图片的时候，如何用一张图片来作为多个不同宽度的盒子的背景图片呢？那么我们就要用到滑动门技术，通过一个父级盒子里放一个子盒子，两盒子用同一张背景图片（背景图片的宽度大于盒子的宽度），让父盒子背景图片居左，子盒子背景图片居右。当父盒子，子盒子不断被撑大时，背景图片随盒子的撑大其在盒子外被隐藏的部分逐渐显现出来，只要盒子宽度不超过背景图片的宽度，那么这两个盒子看起来就像一个盒子。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>滑动门技术</title>
<style>
a{
display:inline-block;
height:28px;
background: url("./images/to.png") no-repeat left;
padding-left:25px;
}
span{
display:inline-block;
height:28px;
background: url("./images/to.png") no-repeat right;
padding-right: 25px;
color:white;
line-height: 25px;
}
a:hover{
background: url("./images/ao.png") no-repeat left;
}
a:hover span{
background: url("./images/ao.png") no-repeat right;
}
</style>
</head>
<body>
<a href="">
<span>这是一个滑动门</span>
</a>
</body>
</html>效果如下，当我们向盒子中输入字时，盒子不断被撑大，背景图片也跟着增大，实际上是父盒子的背景图片与子盒子的背景图片相反向滑动被拉开的结果。
