一、box-shadow問題探究
box-shadow 在MDN定義以及詳解：
box-shadow 以由逗號分隔的列表來描述一個或多個陰影效果。該屬性讓你可以對幾乎所有元素的邊框產生陰影。如果元素同時設置了 border-radius ，陰影也會有圓角效果。多個陰影的z-ordering 和多個 text shadows 規則相同(第一個陰影在最上面)。inset默認陰影在邊框外。
參數：
<offset-x> 設置水平偏移量，如果是負值則陰影位於元素左邊。
<offset-y> 設置垂直偏移量，如果是負值則陰影位於元素上面。可用單位請查看 <length> 。如果兩者都是0，那么陰影位於元素后面。這時如果設置了<blur-radius> 或<spread-radius> 則有模糊效果。
<blur-radius>模糊半徑值越大，模糊面積越大，陰影就越大越淡。 不能為負值。默認為0，此時陰影邊緣銳利。
<spread-radius>擴展半徑取正值時，陰影擴大；取負值時，陰影收縮。默認為0，此時陰影與元素同樣大。
<color>相關事項查看 <color> 。如果沒有指定，則由瀏覽器決定——通常是color的值，不過目前Safari取透明。
使用 inset 后，陰影在邊框內（即使是透明邊框），背景之上內容之下。
陰影大小
<spread-radius>才是用來控制陰影大小（擴展還是縮小）。如果沒有設置擴展半徑，那么陰影尺寸與元素大小相同。
.shadow{ width:40px; height:40px; margin:100px auto; border:2px solid orange; box-shadow:50px 50px 0px 0px #00ff00; }
效果如下：
模糊半徑是否影響陰影大小？
只要沒有設置擴展半徑，陰影實際的大小不改變。<blur-radius>的值用來控制模糊程度，並不控制陰影的大小。<blur-radius>就類似於於photoshop中的羽化半徑。
.shadow1{ width:40px; height:40px; margin:100px auto; border:2px solid orange; box-shadow:50px 50px 10px 0px #00ff00, -50px 50px 40px 0px #00ff00; }
擴展半徑正負值對陰影大小的影響
.shadow1{ width:40px; height:40px; margin:100px auto; border:2px solid orange; box-shadow:60px 60px 0 10px #00ff00; } .shadow2{ width:40px; height:40px; margin:100px auto; border:2px solid orange; box-shadow:60px 60px 0 -10px #00ff00; }
擴展半徑如果是正的值，陰影擴展，如原來總寬高為44px的元素（包括邊框2px），在設置10px擴展半徑后，陰影的寬高會變為64px。
擴展半徑如果是負的值，陰影收縮，如原來總寬高為44px的元素（包括邊框2px），在設置-10px半徑后，陰影的寬高會變為24px。
二、陰影問題解決
制作單邊陰影時候常遇見這樣一個情況，明明設置了x,y軸方向的偏移，為什么別的邊還是有陰影出現。
.shadow1{ width:100px; height:100px; margin:100px auto; border:2px solid orange; box-shadow:3px 10px 10px 0 #00ff00; }
如果不想邊框左邊出現任何綠色陰影，那么我們需要將x方向的偏移量調大一下。
.shadow1{ width:100px; height:100px; margin:100px auto; border:2px solid orange; box-shadow:8px 10px 10px 0 #00ff00; }
可是元素右邊的陰影太多了，如果將x偏移量改小了，左邊就會出現陰影。
這種進退維谷的情況讓人很奔潰。這其實模糊半徑帶來的問題，在設置模糊半徑的時候（沒有設置偏移量和擴展半徑），發現元素四周會有陰影（羽化）的效果。
為了解決這個問題我們會不停調整左右的偏移量，其實我們應該調整元素擴展半徑，讓它變為負值，縮小陰影尺寸。
.shadow1{ width:100px; height:100px; margin:100px auto; border:2px solid orange; box-shadow:3px 10px 10px -2px #00ff00; }
三、制作陰影
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> </head> <style> .shadow div{ float:left; margin:50px 120px; width:100px; height:100px; border:2px solid orange; text-align:center; line-height:100px; } .left{ box-shadow:-5px 0 10px -5px #00ff00; } .bottom{ box-shadow:0 5px 10px -5px #00ff00; } .right{ box-shadow:5px 0 10px -5px #00ff00; } .top{ box-shadow:0px -5px 10px -5px #00ff00; } .left-top{ box-shadow:-5px -5px 10px -4px #00ff00; } .right-top{ box-shadow:5px -5px 10px -4px #00ff00; } .left-bottom{ box-shadow:-5px 5px 10px -4px #00ff00; } .right-bottom{ box-shadow:5px 5px 10px -4px #00ff00; } .no-left{ /* .right-bottom,.right-top組合 */ box-shadow:5px 5px 10px -4px #00ff00,5px -5px 10px -4px #00ff00; } .no-bottom{ /* .left-top,.right-top組合 */ box-shadow:-5px -5px 10px -4px #00ff00,5px -5px 10px -4px #00ff00; } .no-right{ /* .left-top，.left-bottom組合 */ box-shadow:-5px -5px 10px -4px #00ff00,-5px 5px 10px -4px #00ff00; } .no-top{ /* .left-bottom,,right-bottom組合 */ box-shadow:-5px 5px 10px -4px #00ff00,5px 5px 10px -4px #00ff00; } </style> <body> <div class="shadow"> <div class="left">左邊陰影</div> <div class="bottom">底部陰影</div> <div class="right">右部陰影</div> <div class="top">頂部部陰影</div> <div class="left-top">左上陰影</div> <div class="right-top">右上陰影</div> <div class="left-bottom">左下陰影</div> <div class="right-bottom">右下陰影</div> <div class="no-left">無左陰影</div> <div class="no-bottom">無下陰影</div> <div class="no-right">無右陰影</div> <div class="no-top">無上陰影</div> </div> </body> </html>
