box-shadow屬性詳解

1.box-shadow屬性語法
    box-shadow 屬性接受值最多由五個不一樣的部分組成。
    box-shadow: offset-x offset-y blur spread color position;
    換句說： 對象選擇器 {box-shadow:X軸偏移量   Y軸偏移量   陰影模糊半徑   陰影擴展半徑   陰影顏色   投影方式 } 
    不像其它的屬性，好比 border，它們的接受值能夠被拆分爲一系列子屬性，box-shadow 屬性沒有子屬性。這意味着記住這些組成部分的順序更加劇要，尤爲是那些長度值。

2.offset-x
    第一個長度值指明瞭陰影水平方向的偏移，即陰影在 x 軸的位置。值爲正數時，陰影在元素的右側；值爲負數時，陰影在元素的左側。
    CSS
    .left { box-shadow: 20px 0px 10px 0px rgba(0,0,0,0.5) }
    .right { box-shadow: -20px 0px 10px 0px rgba(0,0,0,0.5) }

3.offset-y
    第二個長度值指明瞭陰影豎直方向的偏移，即陰影在 y 軸的位置。值爲正數時，陰影在元素的下方；值爲負數時，陰影在元素的上方。
    .left { box-shadow: 0px 20px 10px 0px rgba(0,0,0,0.5) }
    .right { box-shadow: 0px -20px 10px 0px rgba(0,0,0,0.5) }

4.blur
    第三個長度值表明了陰影的模糊半徑，舉例來講，就是你在設計軟件中使用 高斯模糊 濾波器帶來的效果。值爲 0 意味着該陰影是固態而鋒利的，徹底徹底沒有模糊效果。blur 值越大，陰影則更不鋒利而更朦朧 / 模糊。負值是不合法的，會被修正成 0。
    .left { box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.5) }
    .middle { box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.5) }
    .right { box-shadow: 0px 0px 50px 0px rgba(0,0,0,0.5) }

5.spread
    第四個長度表明了陰影擴展半徑，其值能夠是正負值，若是值爲正，則整個陰影都延展擴大，反之值爲負值是，則縮小。前提是存在陰影模糊半徑。
    .left { box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.5) }
    .middle { box-shadow: 0px 0px 20px 20px rgba(0,0,0,0.5) }
    .right { box-shadow: 0px 0px 50px 50px rgba(0,0,0,0.5) }

6.color
    color 部分的值正如你所預料的，是指陰影的顏色。它能夠是任意的顏色單元 （見 在 CSS 中與顏色打交道）。
    .left { box-shadow: 0px 0px 20px 10px #67b3dd }
    .right { box-shadow: 0px 0px 20px 10px rgba(0,0,0,0.5) }

7.position
    此參數是一個可選值，若是不設值，其默認的投影方式是外陰影；
    若是取其惟一值「inset」,就是將外陰影變成內陰影，也就是說設置陰影類型爲「inset」時，其投影就是內陰影。
    .left { box-shadow: 0px 0px 20px 10px #67b3dd }
    .right { box-shadow: 0px 0px 20px 10px rgba(0,0,0,0.5) inset}

參考借鑑:http://www.iyangqiong.com/web/318.html