box-shadow 制作单边阴影效果,不影响其它边的效果

以前在使用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