和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> <p class="box-shadow top">p> <p class="box-shadow right">p> <p class="box-shadow bottom">p> <p class="box-shadow left">p> 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的擴充半徑，
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
