阴影

box-shadow

语法

 E {box-shadow:inset x-offset y-offset blur-radius spread-radius color}

box-shadow属性至多有6个参数设置，他们分别取值：

阴影类型：此参数是一个可选值，如果不设值，其默认的投影方式是外阴影；如果取其唯一值“inset”,就是将外阴影变成内阴影，也就是说设置阴影类型为“inset”时，其投影就是内阴影；

X-offset:是指阴影水平偏移量其值可以是正负值可以取正负值，如果值为正值，则阴影在对象的右边，反之其值为负值时，阴影在对象的左边；

Y-offset:是指阴影的垂直偏移量，其值也可以是正负值，如果为正值，阴影在对象的底部，反之其值为负值时，阴影在对象的顶部；

阴影模糊半径：此参数是可选，，但其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；

阴影扩展半径：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值是，则缩小

阴影颜色：此参数可选，如果不设定任何颜色时，浏览器会取默认色，但各浏览器默认色不一样，特别是在webkit内核下的safari和chrome浏览器将无色，也就是透明。

 阴影和padding、radius的影响关系

.one {
            margin: 0 auto;
             100px;
            height:100px;

        }
        .one {
            background: yellowgreen;
            border:12px solid blue;
            border-top-left-radius: 60px 90px;
            border-bottom-right-radius: 60px 90px;
            box-shadow:64px 64px 24px 40px rgba(0,0,0,0.4),
                       inset 12px 12px 0px 18px rgba(0,0,0,0.4) 
        }
<div class="one"></div>

从上面图中，我们能看到圆角、阴影扩展、阴影模糊以及padding是如何影响对象阴影的：非0值的圆角将会以相同的作用影响阴影的外形，但border-image不会影响对象阴影的任何外形；对象阴影同box模型的层次一样，外阴影会在对象背景之下，内阴影会在边框之下背景之上，整个层级关系为：边框 > 内阴影 > 背景图片 > 背景颜色 > 外阴影

单边效果

   

在上面我们对不同边使用了不同的阴影，此时模糊半径为0，如果模糊半径不为0，此时其他三边也会有阴影，还会涉及到一个多阴影的顺序问题：当给同一个元素使用多个阴影属性时，最先写的阴影将显示在最顶层，例如下面的效果中，左边的放在第一个，其green阴影色在顶边的blue上，而顶边的blue又在右边的yellow上，右边的yellow却在底边的red上，所以在应用多层次阴影的写法时，一点要注意顺序问题

    

并且在使用多层次阴影的时候，如果前面的模糊值小于后面的模糊值，那么前面的显示在后面之上，如果前面的模糊值大于后面的模糊值，那么前面的阴影将遮住后面的阴影效果。 

四边具有相同的阴影效果

 

只设置阴影扩展半径和阴影颜色时，这种效果同border:1px solid red的效果看上去是相同，但其实当角度加大时，两者之间的差距会越来越明显，因为border被计算了宽度，而阴影是忽略不计的，所以我们可以利用阴影模拟边框而不会影响页面的任何布局。

 多层边框

box-shadow的第四个参数（称作“扩张半径”），通过指定正值或负值，可以让投影面积加大或者减小。一个正值的扩张半径加上两个为零的偏移量以及为零的模糊值，得到的“投影”其实就像一道实线边框。这并没有什么了不起的，因为你完全可以用 border 属性来生成完全一样的边框效果。不过 box-shadow 的好处在于，它支持逗号分隔语法，我们可以创建任意数量的投影。

 

唯一需要注意的是，box-shadow 是层层叠加的，第一层投影位于最顶层，依次类推。因此，你需要按此规律调整扩张半径。比如说，在前面的代码中，我们想在外圈再加一道 5px 的外框，那就需要指定扩张半径的值为15px（10px+5px）。如果你愿意，甚至还可以在这些“边框”的底下再加一层常规的投影。

  

 在使用多重阴影实现多重边框时，需要注意：

• 投影的行为跟边框不完全一致，因为它不会影响布局，而且也不会受到 box-sizing 属性的影响。不过，你还是可以通过内边距或外边距（这取决于投影是内嵌和还是外扩的）来额外模拟出边框所需要占据的空间。
• 上述方法所创建出的假“边框”出现在元素的外圈。它们并不会响应鼠标事件，比如悬停或点击。如果这一点非常重要，你可以给box-shadow 属性加上 inset 关键字，来使投影绘制在元素的内圈。请注意，此时你需要增加额外的内边距来腾出足够的空隙。

outline方案实现多重边框

outline结合border也可以实现多重边框，这种方法的一大优点在于边框样式十分灵活，不像上面的 box-shadow 方案只能模拟实线边框（假设我们需要产生虚线边框效果，box-shadow 就没辙了）。描边的另一个好处在于，你可以通过 outline-offset 属性来控制它跟元素边缘之间的间距，这个属性甚至可以接受负值。这对于某些效果来说非常有用。

 

但是由于outline并不能接受用逗号分隔的多个值，所以只能实现两层边框。另外，边框不一定会贴合 border-radius 属性产生的圆角，因此如果元素是圆角的，它的描边可能还是直角的。