版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/hlx20080808/article/details/87605779
在css3中我们知道可以使用box-shadow属性轻松的为元素添加阴影效果，并且可以设置多组效果，每组参数值用逗号隔开。如果把box-shadow特性的两个偏移量 h-shadow 、v-shadow设置为0，将模糊值blur也设置为0，此时增加扩张半径，就会使元素的投影变为实线边框。这样就可以模拟多边框效果了，首先看下box-shadow语法和参数。
http://www.runoob.com/cssref/css3-pr-box-shadow.html
box-shadow语法：
box-shadow: h-shadow v-shadow blur spread color inset;参数说明：
- x-shadow：设置对象的阴影水平偏移值，单位可以是px、em或百分比等，允许负值。{正值阴影在右边，负值阴影在左边，0的时候阴影中盒子后面，看不见的，如果有blur-radius值会有模糊效果。}
- y-shadow：设置对象的阴影垂直偏移值，单位可以是px、em或百分比等，允许负值。{同上}
- blur：用于设置边框阴影半径大小。
- spread：扩展半径，设置阴影的尺寸；这个参数可选，缺省时值为0。
- color：设置阴影的颜色；
- inset：这个参数默认不设置。默认情况下为外阴影，inset表示内阴影。
box-shadow实现多边框：
代码：
div{
width: 10%;
height: 100px;
background: coral;
margin: 50px;
text-align: center;
float: left;
font-size: 12px;
}
#d1{
/*语法box-shadow：x-shadow水平偏移值 y-shadow垂直偏移值 blur阴影半径 spread扩展半径 color颜色 inset内阴影;*/
/*rgba(0,0,0,.1)灰色*/
box-shadow: 0 0 0 10px rgba(0,0,0,.1),
0 0 0 16px yellow,
0 2px 5px 16px cyan;
}
<div id="d1"></div>内阴影的使用:
代码：
#d2{
box-shadow: 2px 2px 8px black inset;
}
#d3{
box-shadow: -2px -2px 8px black inset;
}说明：使用insert的时候offset-x,offset-y的值的意义和外阴影是相反的，正值是左边，上边。负值是右边，下边。
外阴影的使用：
/*外部阴影*/
#d4{
box-shadow: 2px 2px 18px black ;
}
spread-radius阴影扩大缩小的作用：
扫描二维码关注公众号，回复：
5371616 查看本文章
/*把阴影的大小向外扩大了，左边和上边也出现了明显的阴影效果。*/
#d5{
box-shadow: 4px 4px 8px 6px black ;
}
使用rgba等有透明效果的阴影：
#d6{
box-shadow: 4px 4px 8px 6px rgba(0,0,0,.5 ) ;
}
阴影效果会跟随元素的圆角也会显示圆角的阴影。并且外阴影效果会和外阴影合并，内阴影效果会和内阴影合并，外阴影效果不会和内阴影效果不会合并。
#d7{
border-radius:8px;
box-shadow: 4px 4px 8px rgba(0,0,0,0.5),
4px 5px 3px #05A623,
inset 4px 4px 8px #000;
}
box-shadow单边阴影实现：
也是要借助spread-radius参数来实现
源代码：
#d8{
/*box-shadow: 0 0 8px 6px rgba(0,0,0,.8 ) ;*/
box-shadow: 8px 2px 2px -4px rgba(0,0,0,0.8);
}
#d9{
box-shadow: 2px 8px 2px -4px rgba(0,0,0,0.8);
}
#d10{
box-shadow: 2px -8px 2px -4px rgba(0,0,0,0.8);
}
#d11{
box-shadow: -8px 2px 2px -4px rgba(0,0,0,0.8);
}
#d12{
box-shadow: 0 0 2px 4px rgba(0,0,0,0.8);
}