box-shadow属性
用于设置盒子阴影效果
盒子外阴影
box-shadow:[左右阴影偏移距离(px)] [上下阴影偏移距离(px)] [模糊程度(px)] [模糊距离(px)] [颜色]
[左右阴影偏移距离(px)] ---- 正数-阴影偏向盒子右端,负数-阴影偏向盒子左端
[上下阴影偏移距离(px)] ---- 正数-阴影偏向盒子下端,负数-阴影偏向盒子上端
[模糊程度(px)] ---- 数值越大-表示盒子阴影的模糊程度越高,负数-阴影模糊程度越小
[模糊距离(px)] ---- 数值越大-模糊的范围就越大
[颜色] ---- 设置模糊颜色
- 例
#box {
width: 100px;
height: 100px;
margin: 100px;
border: 1px solid #ccc;
box-shadow: 10px 10px 10px 10px #ccc;
}
box-shadow内边阴影
{
box-shadow:
//对应盒子上内边阴影,第一个值为左右偏移,第二个为上下偏移
inset 0 5px white,
//对应盒子右内边阴影,第一个值为左右偏移,第二个为上下偏移
inset 0 -5px #ccc,
//对应下内边阴影,第一个值为左右偏移,第二个为上下偏移
inset -5px 0 #d7d7d7,
//对应做内边阴影,第一个值为左右偏移,第二个为上下偏移
inset 5px 0 #d7d7d7;
}
- 第三个值表示对应边的阴影颜色
- 有顺序要求,新设置的阴影会盖在后设置阴影上面
—— 例
width: 120px;
height: 120px;
margin: 0 16px;
padding: 10px 5px;
box-sizing: border-box;
list-style: none;
border-radius: 10%;
box-shadow:
inset 0 5px white,
inset 0 -5px #ccc,
inset -5px 0 #d7d7d7,
inset 5px 0 #d7d7d7;
background-color: #e7e7e7;
更多推荐
【box-shadow盒子内边阴影&外阴影】
发布评论