我們在網頁設計中，通常會使用ps工具來達到圖片或者邊框陰影、立體等效果。但是如果一些基礎效果都需要用p圖來完成那就顯得效率比較低了。其實可以使用CSS來設置邊框陰影，下面本篇文章來給大家介紹一下。
在css中，我們可以通過box-shadow屬性來設置邊框陰影。
box-shadow屬性可以向邊框添加一個或多個陰影。該屬性是由逗號分隔的陰影列表，每個陰影由 2-4 個長度值、可選的顏色值以及可選的 inset 關鍵詞來規定。省略長度的值是 0。
語法：
box-shadow: h-shadow v-shadow blur spread color inset;
取值：
-
h-shadow：必需設置的值，定義水平陰影的位置。允許負值。
-
v-shadow：必需設置的值，定義垂直陰影的位置。允許負值。
-
blur：可選設置的值，定義模糊距離。
-
spread：可選設置的值，定義陰影的尺寸。
-
color ：可選設置的值，定義陰影的顏色。如果沒有設置值，顏色值基於瀏覽器顯示，建議設置。
-
inset：可選設置的值，設置后可將外部陰影 (outset) 改為內部陰影。
css3邊框陰影代碼示例如下：
1、box-shadow屬性實現邊框外陰影
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS3邊框陰影</title> 6 <style type="text/css"> 7 *{margin: 0px;padding: 0px;} 8 div{margin: 20px 0px; 9 width: 100%; 10 height: 40px; 11 background: #fff; 12 box-shadow:5px 5px 10px 5px #ccc; 13 } 14 </style> 15 </head> 16 <body> 17 <div></div> 18 </body> 19 </html>
此段HTML代碼中，我們給div添加了一個box-shadow的樣式屬性，並且參數分別設置為5px 5px 10px 5px #ccc。
說明：由於沒有設置inset（內陰影）參數，默認為外陰影。
2、box-shadow屬性實現邊框內陰影
在上述HTML代碼的基礎上，我們將box-shadow樣式屬性的值進行一些變化：
box-shadow:5px 5px 10px 5px #ccc inset;
3、box-shadow屬性實現圓柱形效果
box-shadow:0px 5px 10px 10px #ccc inset;
這里我們將水平方向陰影位置設置為0個像素點並且設置內陰影。
注：box-shadow屬性中，前兩個參數可以為負值並且是必須存在，而后面的參數則都是可選的。