利用邊框陰影（box-shadow），可以制作出光暈、浮雕等原來只有依賴P圖才能完成的效果。ie6~ie8都不支持邊框陰影（box-shadow），ie9+Firefox4，Chrome，Opera及Safari5.1.1支持邊框陰影屬性（box-shadow），在邊框陰影（box-shadow）的基本語(yǔ)法中，參數(shù)inset是可選可不選的，選參數(shù)inset，將外部陰影改為內(nèi)部陰影；而不選參數(shù)inset，即默認(rèn)情況下是外部陰影的。
css陰影——如何用CSS實(shí)現(xiàn)DIV塊的陰影效果
可以用CSS3的陰影屬性。不過要支持IE6的話，加載個(gè).htc行為文件就好了。border:1pxsolid#696;padding:60px0;text-align:center;width:200px;-webkit-box-shadow:#6660px0px10px;-moz-box-shadow:#6660px0px10px;box-shadow:#6660px0px10px;background:#EEFF99;behavior:url(/PIE.htc)。
直接使用box-shadow:5px5px10pxblackinset;屬性設(shè)置樣式樣式就可以了。前兩個(gè)值（5px5px）是水平和垂直方向的偏移量，正值陰影就會(huì)向左向下偏移，負(fù)值反之；第三個(gè)值（10px）是設(shè)置模糊距離；black就是陰影的顏色啦；最后一個(gè)inset是在元素內(nèi)部創(chuàng)建一個(gè)陰影，也就是內(nèi)陰影了；刪除掉inset就是設(shè)置外陰影了。
這是使用純CSS實(shí)現(xiàn)的效果，在DIV層的區(qū)域邊框添加陰影效果，看上去非常形象，但是實(shí)現(xiàn)起來并不是太難，CSS代碼比較簡(jiǎn)潔，值得我們學(xué)習(xí)。<title>盒子陰影的CSS實(shí)現(xiàn)方法</title>
box-shadow單邊陰影寫法
語(yǔ)法：box-shadow:h-shadowv-shadowblurspreadcolorinset;
(box-shadow:水平陰影垂直陰影模糊距離陰影大小陰影顏色內(nèi)部陰影;)
水平陰影、垂直陰影值必填，其余值可選；
<!DOCTYPEhtml>
<html>
<head>
<metacharset=”UTF-8″>
<title>css3屬性</title>
<styletype=”text/css”>
div.a{
width:200px;
height:200px;
margin:20pxauto;
border:1pxsolid#CCCCCC;
box-shadow:10px20px10px10px#f00;
}
</style>
</head>
<body>
<divclass=”a”></div>
</body>
</html>
水平陰影可以理解為偏左右哪個(gè)方向，如果加入inset，正數(shù)偏左，負(fù)數(shù)偏右，如果沒有inset，正數(shù)偏右，負(fù)數(shù)偏左；
垂直陰影可以理解為偏上下哪個(gè)方向，如果加入inset，正數(shù)偏上，負(fù)數(shù)偏下，，如果沒有inset，正數(shù)偏下，負(fù)數(shù)偏上；
總之，inset屬性讓水平、垂直陰影的方向與沒有inset時(shí)相反。
如果只要實(shí)現(xiàn)單側(cè)陰影，就得犧牲掉模糊效果，因?yàn)橐坏┠：伾珪?huì)擴(kuò)散，效果會(huì)不明顯。因?yàn)殛幱皬谋举|(zhì)上來說是一個(gè)顏色塊。0-10px00設(shè)置上方單邊陰影；10px000設(shè)置右側(cè)單邊陰影。
用將width和height設(shè)置為0，通過border特性來實(shí)現(xiàn)三角形的效果的方法，想必很多人都實(shí)現(xiàn)過。但是如果要求三角形邊緣具有陰影效果，這樣一來以前的實(shí)現(xiàn)方式顯然是不行，因?yàn)閎ox-shadow屬性對(duì)border內(nèi)部的邊緣是沒有效果的。如果大家還想了解更多與之有關(guān)的信息，歡迎關(guān)注我們文軍營(yíng)銷的官網(wǎng)。
推薦閱讀
400-685-0732(7x24小時(shí))
關(guān)注文軍
