css3邊框陰影效果box-shadow用法詳解
案例演示如下:
<!DOCTYPE html> <html> <head> <style> div { margin-top:100px; margin-left:100px; width:300px; height:100px; background-color:#ff9900; box-shadow:20px 0px 30px 10px #abcdef inset;/zz/ /*這6個值分別是:left值 、top值、透明度、陰影外延寬度、顏色、向里凹陷(選填,默認為外延)*/ } </style> </head> <body> <div></div> </body> </html>
其中前2個值的用法跟對背景圖片進行定位時的用法差不多。
將/zz/前的那句代碼替換為:box-shadow:0px 0px 30px 10px #abcdef;
效果圖如下:

前4個屬性均可設置為負值。
