box-shadow：給盒子加上陰影效果
語法： ?
box-shadow： offset-x ?offset-y ?blus ?spread ?color ?inset;
box-shadow： X軸偏移量 ?Y軸偏移量 ?[陰影模糊半徑] ?[陰影擴展半徑] ?[陰影顏色] ?[投影方式]允青；
X軸偏移量：陰影在X軸上的位置卵沉。當值為正數(shù)時，陰影位于元素的右側(cè)琼掠；當值為負數(shù)時，陰影位于元素的左側(cè)瓷蛙。
Y軸偏移量：陰影在Y軸上的位置艰猬。當值為正數(shù)，陰影位于元素的底部冠桃；當值為負數(shù)，陰影位于元素的頂部胸蛛。
[陰影模糊半徑] ：該參數(shù)是可選的碳蛋。其值只能為正值胚泌，如果值為0時，表示陰影不具有模糊效果笤受，blur值越大陰影的邊緣就越模糊敌蜂。
[陰影擴展半徑]：該參數(shù)是可選的。當值為0汗贫，完全沒有擴展秸脱；當值為正數(shù)時，擴展越大咐蝇；當值為負數(shù)時巷查，?擴展縮小抹腿。
[陰影顏色]：該參數(shù)是可選的警绩。顏色單位有常用色值, RGB, RGBA, HSLA等房蝉。
[陰影方式]：改參數(shù)是可選的微渠。默認為外部陰影（outset）, 可通過inset值來設置內(nèi)部陰影.
案例：
X軸偏移量
.left { ?box-shadow: ?20px ?0 ?10px ?0 ?rgba(0,0,0,.3); } ? ? ? ?/*陰影向右偏移20px*/
.right { ?box-shadow: ?-20px ?0 ?10px ?0 ?rgba(0,0,0,.3); } ? ? ? ?/*陰影向左偏移20px*/
Y軸偏移量
.left { ?box-shadow: ?0px ?20px ?10px ?0 ?rgba(0,0,0,.3); } ? ? ? ?/*陰影向下偏移20px*/
.right {? box-shadow:? 0px ?-20px ?10px ?0 ?rgba(0,0,0,.3); } ? ? ? ?/*陰影向上偏移20px*/
[陰影模糊半徑]
.left { ?box-shadow: ?0px ?0px ?0px ?0 ?rgba(0,0,0,1); } ? ? ? ?/*模糊半徑為0px逞盆，完全沒有模糊效果*/
.right {? box-shadow:? 0px ?0px ?80px ?0 ?rgba(0,0,0,1); } ? ? ? ?/*模糊半徑為80px*/
上圖中我們不難看出檀蹋，對角線上的模糊是最弱的，要想模糊變得均勻云芦，將元素設置成圓形俯逾。即 ? border-radius：50% 如下圖所示
.right {? box-shadow:? 0px ?0px ?80px ?0 ?rgba(0,0,0,1); ?border-radius: ?50%; ?} ? ? ? ? ?/*模糊半徑為80px，邊框為50%（即圓形）*/
[陰影擴展半徑]
.left { ?box-shadow: ?0px ?0px ?0px ?0px ?#ccc; } ? ? ? ? ? ?/*擴展半徑為0px*/
.right {? box-shadow:? 0px ?0px ?10px ?10px ?#ccc; } ? ? ? ?/*擴展半徑為10px舅逸，模糊半徑為10px*/
[陰影顏色] ? 以下顏色都為黑色
.left { ?box-shadow: ?0px ?10px ?10px ?0px ?black; }
.left { ?box-shadow: ?0px ?10px ?10px ?0px ?#000; }
.left { ?box-shadow: ?0px ?10px ?10px ?0px ?rgba(0,0,0,1); }
[陰影方式]
.left { ?box-shadow: ?0px ?0px ?10px ?10px ?#ccc;} ? ? ? ? ? ? ? ? ? ?/*模糊半徑與擴展半徑都為10px,默認外部陰影*/
.right {? box-shadow:? 0px ?0px ?10px ?10px ? #ccc ?inset; } ? ? ? ?/*模糊半徑與擴展半徑都為10px,內(nèi)部陰影*/
多個陰影方式：如果需要添加多個陰影桌肴，只需用逗號隔開即可。
.left { ? box-shadow: ?0px ?0px ?10px ?5px ? #ccc, ?0px ?0px ?10px ?5px ?rgba(255,255,255,1) ?inset; ?} ? ? ? ? ? ?/*同時設置內(nèi)外陰影*/
.left { ? box-shadow: ?-10px ?10px ?10px ?10px ?rgba(0,0,0,.6); } ? ? ? ?/*陰影向左偏移10px琉历，向下偏移10px坠七，擴展半徑與模糊半徑為10px。若是要設置為內(nèi)陰影彪置，加上 inset 拳魁。*/
.left { ? box-shadow: ?10px ?-10px ?10px ?10px ?rgba(0,0,0,.6); } ? ? ? ?/*陰影向右偏移10px，向上偏移10px授舟，擴展半徑與模糊半徑為10px岂却。 若是要設置為內(nèi)陰影，加上 inset 署浩。*/
如有不足之處，請多多指教正驻。未經(jīng)本人同意姑曙，請勿轉(zhuǎn)載~
