3.5.2 box-shadow屬性使用方法（1）
@原文url：http://book.51cto.com/art/201407/444460.htm
和PSD軟件制作圖片相比，box-shadow修改元素的陰影效果要方便得多，因為box-shadow可以修改六個參數，得到不同的效果。下面結合一些簡單的案例來對box-shadow屬性進行演示說明。
1．單邊陰影效果
定義元素的單邊陰影效果和調協border的單邊邊框顏色是相似的，例如：
- >
- <html lang="en-US">
- <head>
- <meta charset="UTF-8">
- <title>box-shadow設置單邊陰影效果title>
- <style type="text/css">
- .box-shadow {
- width: 200px;
- height: 100px;
- border-radius: 5px;
- border: 1px solid #ccc;
- margin: 20px;
- }
- .top {
- box-shadow: 0 -2px 0 red;
- }
- .right {
- box-shadow: 2px 0 0 green;
- }
- .bottom {
- box-shadow: 0 2px 0 blue;
- }
- .left {
- box-shadow: -2px 0 0 orange;
- }
- style>
- head>
- <body>
- <div class="box-shadow top">div>
- <div class="box-shadow right">div>
- <div class="box-shadow bottom">div>
- <div class="box-shadow left">div>
- body>
- html>
效果如圖3-38所示。
這個案例中，使用box-shadow給元素設置了頂邊、右邊、底邊和左邊的單邊陰影效果。主要通過box-shadow的水平和垂直陰影的偏移量 來實現，其中x-offset為正值時，生成右邊陰影，反之為負值時，生成左邊陰影；y-offset為正值時，生成底部陰影，反之為負值時生成頂部陰 影。此例中是一個單邊實影投影效果（陰影模糊半徑為0），但是如果陰影的模糊半徑不是0，上面的方法還能不能實現單邊陰影效果呢？不急着來回答，在上面的 實例中添加一個模糊半徑，例如：
- .top {
- box-shadow: 0 -2px 5px red;
- }
- .right {
- box-shadow: 2px 0 5px green;
- }
- .bottom {
- box-shadow: 0 2px 5px blue;
- }
- .left {
- box-shadow: -2px 0 5px orange;
- }
圖3-39說明，這個效果並不是理想的單邊陰影效果，當box-shadow添加了5px陰影模糊半徑后，陰影不再是實影投影，陰影清晰度向外擴散，更具陰影的效果。但造成了另一個問題，給元素其他三個邊加上淡淡的陰影效果，可這並不是設計需要的效果。
那究竟要怎么做呢？此時，box-shadow屬性中的陰影擴展半徑（spread-radius）會是一個很關鍵的屬性，要實現單邊陰影效果，必須配上這個屬性（除單邊實影之外）。
- .top {
- box-shadow: 0 -4px 5px -3px red;
- }
- .right {
- box-shadow: 4px 0 5px -3px green;
- }
- .bottom {
- box-shadow: 0 4px 5px -3px blue;
- }
- .left {
- box-shadow: -4px 0 5px -3px orange;
- }
上面的代碼調整了陰影的位移量，新增了box-shadow的擴展半徑，