前言
box-shadow: h-shadow v-shadow blur spread color inset;
| 参数值 | 描述 |
|---|---|
| h-shadow (X轴偏移量) | 必需。水平阴影的位置。允许负值。 |
| v-shadow (Y轴偏移量) | 必需。垂直阴影的位置。允许负值。 |
| blur (阴影模糊半径) | 可选。模糊距离。 |
| spread (阴影扩展半径) | 可选。阴影的尺寸。 |
| color (阴影颜色) | 可选。阴影的颜色。请参阅 CSS 颜色值。 |
| inset (投影方式) | 可选。将外部阴影 (outset) 改为内部阴影。 |
文档来自=>W3Cschool
Step -- 实例讲解
Step-1：
box-shadow: 0 0 5px #ccc;// x，y偏移量为0 5px的模糊半径
image.png
Step-2：
# 改变X轴偏移量
box-shadow: 5px 0 5px #ccc;// 水平偏移5px
image.png
Step-3：
# 改变Y轴偏移量
box-shadow: 0 5px 5px #ccc;// 垂直偏移5px
image.png
Step-4：
# 改变X、Y轴偏移量
box-shadow: 3px 5px 5px #ccc;
image.png
Step-5：
# 改变X、Y轴偏移量,可以为负值
box-shadow: -3px -5px 5px #ccc;
box-shadow: -3px 5px 5px #ccc;
box-shadow: 3px -5px 5px #ccc;
image.png
Step-6：
# 设置inset
box-shadow: -3px -5px 5px #ccc inset;
box-shadow: -3px 5px 5px #ccc inset;
box-shadow: 3px -5px 5px #ccc inset;
image.png
Step-7：
注意：box-shadow 向框添加一个或多个阴影。
该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。
box-shadow:-3px -5px 5px blue inset,3px 5px 5px red,3px 5px 5px green inset,-3px -5px 5px black;
image.png
Step-8：
#Demo的实例
#html
<div class="main">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
#css
body,html{background: #fafafb;}
*{padding: 0;margin: 0;}
ul li{list-style: none;}
.main{padding: 100px 0}
.main ul{
width: 1200px;
margin: 0 auto;
}
.main ul li {
width: 360px;background: #fff;height: 360px;line-height:360px;display: block;float: left;margin-bottom: 60px;text-align: center;font-size: 100px;
color: #ccc;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
transition: all .4s;
-webkit-transition: all .4s;
-moz-transition: all .4s;
}
.main ul li:nth-child(3n+2){
margin-left:60px;margin-right:60px;
}
.main ul li:hover{
box-shadow: 1px 4px 10px 2px #ccc;
-webkit-box-shadow: 1px 4px 10px 2px #ccc;
-moz-box-shadow: 1px 4px 10px 2px #ccc;
transform: translateY(-2%);
}
原文blog：http://codehtml.cn
