以前在使用box-shadow制作单边阴影效果的时候发现或多或少会影响其它边的展示效果.
今天在阅读文章的时候,终于发现了一个解决的方法.
就是利用box-shadow中的一个参数.spread来解决这个问题.
首先我们先要区分
box-shadow:0 10px 10px #ccc;
box-shadow:0 10px 10px -10px #ccc;
首先,我们应当认知到这两种书写方法都是正确的,其次,它们的展示效果肯定是不同的.
关于box-shadow的具体语法:
E {box-shadow:inset x-offset y-offset blur-radius spread-radius color}
对象选择器 {text-shadow:投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色}
spread参数可以用于改变阴影的大小,其值可以试正负值,如果值为正,则整个阴影都延展扩大,反之值为负值是缩小.
如图:
html:
<div class="dv1">
</
div
>
<
div
class
=
"dv2"
>
</
div
>
style:
.dv1
,
.dv2
{
width
:
100
px
;
height
:
100
px
;
border
:
1
px
solid
#ccc
;
}
.dv1
{
box-shadow
:
-5
px
0
5
px
#ccc
,
/*左边阴影*/
0 -5
px
5
px
#ccc
,
/*顶部阴影*/
0 5
px
5
px
#ccc
,
/*底部阴影*/
5
px
0 5
px
#ccc
;
/*右边阴影*/
}
.dv2
{
box-shadow
:
-5
px
0
5
px
-5
px
#ccc
,
/*左边阴影*/
0 -5
px
5
px
-5
px
#ccc
,
/*顶部阴影*/
0 5
px
5
px
-5
px
#ccc
,
/*底部阴影*/
5
px
0 5
px
1
px
#ccc
;
/*右边阴影*/
}
注意控制第四个spread值来达到显示单边阴影的效果.
参考:http://www.w3cplus.com/css3/css3-box-shadows-unnoticed-spread