在现代浏览器中，使用Box-shadow属性来呈现阴影效果是一种非常有用的技巧，使用它可以创建很多非常酷的东西。 让我们一步一步了解box-shadow属性的基本用法，然后深入了解如何使用：before和：after伪元素。
基本的使用方法
box-shadow:2px 2px 5px #000；
box-shadow:0px 0px 10px #000；
内阴影
box-shadow : inset2px2px5px # 000；
阴影的扩展长度值
box-shadow :0 px0px5px 10 px # 000；
box-shadow :0 px 15 px 10 px-15px # 000；
box-shadow : inset0px 15 px 10 px-15px # 000；
多重阴影
box-shadow :0 px0px0px3px # bb 0a 0a，
0px 0px 0px 6px #2e56bf、
0px 0px 0px 9px #ea982e；
虚拟元素：before和：after乐趣
使用伪元素：before和：after，可以创建只能为图像提供的非常逼真的阴影效果。 请看一个例子：
. box11 {
width: 300px；
height: 100px；
背景： # CCC；
border-radius: 10px；
margin: 10px；
}
. shadow {
position: relative；
max-width: 270px；
盒装：0 px1px4 px rgba (0，0，0，0.3 )，
0 px0px 20 px rgba (0，0，0，0.1 ) inset；
}
. shadow:before、
. shadow:after {
内容： '；
位置： absolute；
z索引：-1；
}
. shadow:before、
. shadow:after {
内容： '；
位置： absolute；
z索引：-1；
bottom:15px；
left:10px；
width:50%；
height:20%；
}
. shadow:before、
. shadow:after {
内容： '；
位置： absolute；
z索引：-1；
bottom:15px；
left:10px；
width:50%；
height:20%；
box-shadow:015px10pxrgba(0、0、0.7 )；
transform:rotate(-3deg )；
}
. shadow:after{
right:10px；
left :自动；
变换：旋转(3d eg )；
}