HTML box-shadow是CSS3的一种新特性，它可以使一个元素产生一个或多个阴影效果，并且与框的边框之外呈现。本文将从多个角度深入探讨HTML box-shadow的各种用法，帮助开发者更好地了解该特性并加以应用。
一、基础用法
1、简单阴影效果
.box {
box-shadow: 5px 5px 5px #888888;
}
该效果将在元素右侧和下方产生一个5像素的阴影，阴影颜色为#888888。
2、多重阴影效果
.box {
box-shadow:
5px 5px 5px #888888,
10px 10px 5px #888888;
}
多个box-shadow属性定义多个阴影效果，各属性之间用逗号隔开。该效果将在元素右下方产生一个大小为5像素、颜色为#888888的阴影，以及一个大小为10像素、颜色为#888888的阴影。
3、立体化效果
.box {
box-shadow: 2px 2px 2px #888888, -2px -2px 2px #888888;
}
通过在阴影大小参数中使用正数和负数，可以创建一个立体化效果。该效果将在元素四周产生大小为2像素、颜色为#888888的阴影，左上角和右下角的阴影为下凸出的立体效果，右上角和左下角的阴影为上凸出的立体效果。
二、深入了解参数
1、长度单位
box-shadow中的长度值可以使用任何CSS长度单位，包括：像素(px)、EMs、REMs、百分比等。如下代码可以让一个元素生成3像素宽、距离左上方三像素、颜色为#333333的阴影：
.box {
box-shadow: 3px 3px #333333;
}
2、偏移量
阴影的第一个参数确定偏移量，第一个参数通常是阴影的水平和垂直偏移量，可以使用2个值分别指定偏移量，也可以使用1个值指定相同的偏移量。如果省略第2个参数，则默认值等于第一个参数，使阴影在所有方向上有相同的偏移量。
.box {
box-shadow: 3px 6px #333333;
}
3、模糊半径
模糊半径决定阴影的边缘模糊程度。模糊半径值越大，阴影就越模糊，而值越小则阴影就越尖锐，甚至于没有模糊效果。如果省略第3个参数，则默认为0，使阴影变成一个尖锐的斜线效果。
.box {
box-shadow: 3px 6px 10px #333333;
}
4、扩张半径
扩张半径可以扩大或者缩小阴影面积。如果省略第4个参数，则阴影保持在边框的内侧，完全在元素内部，而不会扩张到元素的外部。如果定义的值为负数，则使阴影收缩到元素内部。扩张半径不会改变阴影的颜色，只增加了阴影的宽度/高度。
.box {
box-shadow: 2px 2px 2px 2px #333333;
}
三、使用技巧与案例展示
1、制作按钮效果
box-shadow可以很好地应用于按钮效果，通过使用不同的偏移量、模糊半径和颜色，可以创建出各种风格的按钮。例如，下方代码可以创建一个漂亮的扁平化按钮：
.btn {
display: inline-block;
padding: 0.75rem 1.5rem;
border-radius: 3px;
background-color: #333333;
color: #ffffff;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
}
2、创建3D效果的盒子
通过使用不同颜色和偏移量，可以为元素创建3D效果的盒子，使元素在页面中更为突出。例如，下方代码可以创建一个黑色盒子，并在鼠标悬停时产生类似于翘边的3D效果：
.box {
width: 200px;
height: 200px;
background-color: #333333;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
transition: all 0.5s ease-in-out;
}
.box:hover {
box-shadow:
-5px -5px 20px rgba(0, 0, 0, 0.5),
5px 5px 20px rgba(0, 0, 0, 0.5);
}
3、创建动态分割页面
通过使用box-shadow属性，可以创建出一个分割页面的效果。例如，下方代码可以创建一个动态分割页面，用户可以通过拖动条来调整分割线的位置：
.split {
height: 500px;
position: relative;
overflow: hidden;
}
.leftpane, .rightpane {
height: 100%;
position: absolute;
top: 0;
bottom: 0;
overflow: scroll;
}
.split .divider {
width: 5px;
height: 100%;
position: absolute;
left: 50%;
top: 0;
bottom: 0;
margin-left: -2.5px;
background-color: #333333;
cursor: col-resize;
box-shadow:
-2px 0 2px rgba(0, 0, 0, 0.3),
2px 0 2px rgba(0, 0, 0, 0.3);
}
.split .divider:hover {
box-shadow:
-5px 0 5px rgba(0, 0, 0, 0.5),
5px 0 5px rgba(0, 0, 0, 0.5);
}
.split.leftpane .inner {
margin: 1em;
padding: 1em;
background-color: #ffffff;
box-shadow:
5px 0 15px -5px #888888,
-5px 0 15px -5px #888888;
}
.split.rightpane .inner {
margin: 1em;
padding: 1em;
background-color: #ffffff;
box-shadow:
-5px 0 15px -5px #888888,
5px 0 15px -5px #888888;
}
四、总结
HTML box-shadow是一种非常有用的CSS3特性，可以为网页元素增加各种不同的阴影效果。本文详细介绍了box-shadow的各种用法，包括基础用法、参数细节、使用技巧和案例展示。
