box-shadow:水平阴影|垂直阴影|模糊距离|阴影尺寸|阴影颜色|内(外)阴影
水平阴影和垂直阴影必须的写，其余的是可以省略不写；
语法box-shadow:h-shadow v-shadow blur spread color inset;
注释：box-shadow向框添加一个或修个阴影;该属性是由逗号分隔列表;每个阴影有2~4个长度值、可选的颜色值以及可选的inset关键词来规定;省略长度的值是0.
| 值 | 描述 |
|---|---|
| h-shadow | 必需,水平阴影的位置,可为负值 |
| v-shadow | 必需,垂直阴影的位置,可为负值 |
| blur | 可选,模糊距离 |
| spread | 可选,阴影的尺寸 |
| color | 可选,阴影的颜色 |
| inset | 可选,将外部阴影(outset)改为内部阴影；默认值为outset |
<div class="box"></div>
<style type="text/css">
table{
border-collapse: collapse;
border-color: #ccc;
}
.box{
margin-top: 100px;
width: 100px;
height: 100px;
border: 1px solid #f00;
/* box-shadow:水平阴影|垂直阴影|模糊距离|阴影尺寸|阴影颜色|inset outset(默认值)*/
/* box-shadow:10px 3px 15px -2px #f90; */
box-shadow:10px 3px 15px -2px #f90,10px 3px 15px -2px #ffa07a inset;
}
</style>
结论
●盒子阴影可以有多组值，多组之间用逗号隔开就可以
●水平阴影正值阴影在右边负值在左边
●垂直阴影正值在下边，负值在上边
●模糊尺寸，值越大越模糊
转载请注明：大灰牛博客 » 盒子阴影box-shadow