標籤：pre oct mooc 參數 head 位移量 一個 idt com
box-shadow是向盒子添加陰影。支援添加一個或者多個。
box-shadow: X軸位移量 Y軸位移量 [陰影模糊半徑] [陰影擴充半徑] [陰影顏色] [投影方式];
參數介紹：
box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow：水平陰影的位移值，必需，可以為負值。
v-shadow：縱向陰影的位移值，必需，可以為負值。
blur：陰影模糊值，可選，不能為負值。
spread：陰影的擴充，可選，可以為負值。
color：陰影的顏色，雖然是可選，但是在不同的瀏覽器裡面解釋不一樣，有些是黑色，有些是透明，所以建議都要設定。具有透明度的陰影可以用rgba的值。
inset：內陰影。可選，如果預設，預設是外陰影（outset）。
注意：inset 可以寫在參數的第一個或最後一個，其它位置是無效的。
為元素設定外陰影：
範例程式碼：
.box_shadow{ box-shadow:4px 2px 6px #333333; }
效果：
為元素設定內陰影：
範例程式碼：
.box_shadow{ box-shadow:4px 2px 6px #333333 inset; }
效果：
添加多個陰影：
以上的文法的介紹，就這麼簡單，如果添加多個陰影，只需用逗號隔開即可。如：
.box_shadow{ box-shadow:4px 2px 6px #f00, -4px -2px 6px #000, 0px 0px 12px 5px #33CC00 inset;}
效果：
1、陰影模糊半徑與陰影擴充半徑的區別
陰影模糊半徑：此參數可選，其值只能是為正值，如果其值為0時，表示陰影不具有模糊效果，其值越大陰影的邊緣就越模糊；
陰影擴充半徑：此參數可選，其值可以是正負值，如果值為正，則整個陰影都延展擴大，反之值為負值時，則縮小；
2、X軸位移量和Y軸位移量值可以設定為負數
box-shadow: X軸位移量 Y軸位移量 [陰影模糊半徑] [陰影擴充半徑] [陰影顏色] [投影方式];
X軸位移量為負數：
.boxshadow-outset{ width:100px; height:100px; box-shadow:-4px 4px 6px #666;}
：
Y軸位移量為負數：
.boxshadow-outset{ width:100px; height:100px; box-shadow:4px -4px 6px #666;}
：
<!doctype html><html><head> <meta charset="utf-8"> <title>boxshadow</title> <style> .boxshadow-outset{ width:100px; height:100px; box-shadow:4px 4px 6px #666; } .boxshadow-inset{ width:100px; height:100px; box-shadow:4px 4px 6px #666 inset; } .boxshadow-multi{ width:100px; height:100px; box-shadow:4px 2px 6px #f00, -4px -2px 6px #000, 0px 0px 12px 5px #33CC00 inset; } </style></head><body><h2>外陰影</h2><div class="boxshadow-outset"></div><br /><h2>內陰影</h2><div class="boxshadow-inset"></div><br /><h2>多陰影</h2><div class="boxshadow-multi"></div></body>CSS3邊框</html>
轉載：http://www.imooc.com/code/5413
CSS3邊框 陰影 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
