CSS可以为网页增添我们想要的各种各样的效果，比如阴影效果就是我们在美化网页时非常常用的一种效果。而要让我们的网页具有更好的视觉效果和更好的用户体验，我们就需要重点学习和掌握CSS中的boxshadow。

什么是boxshadow？

boxshadow是CSS3中的一个特性，可以给HTML元素增加阴影效果。它是一个非常强大的属性，在前端开发中经常被使用，可以实现非常多样化的视觉效果，从而为网页增添深度和层次感。

使用boxshadow

要在一个元素上添加boxshadow，需要使用box-shadow属性。box-shadow属性有多个参数可调，大多数都是可选的。以下是box-shadow属性的语法：

box-shadow: h-shadow v-shadow blur spread color inset;

1. h-shadow：表示阴影的水平位置，必须指定。其取值可以是正负值，如果值为正，则阴影在元素右侧，否则在左侧，值越大，阴影距离越远，阴影越模糊；

2. v-shadow：表示阴影的垂直位置，必须指定。其取值可以是正负值，如果值为正，则阴影在元素底部，否则在顶部，值越大，阴影距离越远，阴影越模糊；

3. blur：表示阴影的模糊程度，可选。如果没有指定，则值为0，值越大，阴影越模糊，越接近于一个扩散的光斑；

4. spread：表示阴影的尺寸，可选。如果没有指定，则值为0，正值表示阴影扩散的范围越大，负值表示阴影收缩的范围越大；

5. color：表示阴影的颜色，可选。如果没有指定，则阴影的颜色为透明的；

6. inset：表示将阴影设置为内阴影，必须指定。如果设置了值，表示将阴影放在元素的里面，否则在元素外面。默认是外阴影。

需要注意的是，box-shadow属性需要放在一个完整的css属性声明中，并且前缀-vendor也必须加上以支持各个浏览器的兼容性，以下是通用的内容示例：

box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.5);

上面的示例代码定义了一个5px（右侧）、5px（底部）、模糊程度为5px、阴影颜色为黑色、并且是一个外阴影。如果要设置成一个元素的内阴影，只需要在样式中加入该属性即可：

box-shadow: inset 0px 0px 10px rgba(0,0,0,0.5);

此时阴影在元素内部显示，下面是一个具体的示例：