利用邊框陰影（box-shadow），可以制作出光暈、浮雕等原來只有依賴P圖才能完成的效果。ie6~ie8都不支持邊框陰影（box-shadow），ie9+Firefox4，Chrome，Opera及Safari5.1.1支持邊框陰影屬性（box-shadow），在邊框陰影（box-shadow）的基本語法中，參數(shù)inset是可選可不選的，選參數(shù)inset，將外部陰影改為內(nèi)部陰影；而不選參數(shù)inset，即默認情況下是外部陰影的。
css陰影——如何用CSS實現(xiàn)DIV塊的陰影效果
可以用CSS3的陰影屬性。不過要支持IE6的話，加載個.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;屬性設置樣式樣式就可以了。前兩個值（5px5px）是水平和垂直方向的偏移量，正值陰影就會向左向下偏移，負值反之；第三個值（10px）是設置模糊距離；black就是陰影的顏色啦；最后一個inset是在元素內(nèi)部創(chuàng)建一個陰影，也就是內(nèi)陰影了；刪除掉inset就是設置外陰影了。
這是使用純CSS實現(xiàn)的效果，在DIV層的區(qū)域邊框添加陰影效果，看上去非常形象，但是實現(xiàn)起來并不是太難，CSS代碼比較簡潔，值得我們學習。<title>盒子陰影的CSS實現(xiàn)方法</title>
box-shadow單邊陰影寫法
語法：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>
水平陰影可以理解為偏左右哪個方向，如果加入inset，正數(shù)偏左，負數(shù)偏右，如果沒有inset，正數(shù)偏右，負數(shù)偏左；
垂直陰影可以理解為偏上下哪個方向，如果加入inset，正數(shù)偏上，負數(shù)偏下，，如果沒有inset，正數(shù)偏下，負數(shù)偏上；
總之，inset屬性讓水平、垂直陰影的方向與沒有inset時相反。
如果只要實現(xiàn)單側陰影，就得犧牲掉模糊效果，因為一旦模糊，顏色會擴散，效果會不明顯。因為陰影從本質上來說是一個顏色塊。0-10px00設置上方單邊陰影；10px000設置右側單邊陰影。
用將width和height設置為0，通過border特性來實現(xiàn)三角形的效果的方法，想必很多人都實現(xiàn)過。但是如果要求三角形邊緣具有陰影效果，這樣一來以前的實現(xiàn)方式顯然是不行，因為box-shadow屬性對border內(nèi)部的邊緣是沒有效果的。如果大家還想了解更多與之有關的信息，歡迎關注我們文軍營銷的官網(wǎng)。
推薦閱讀
400-685-0732(7x24小時)
關注文軍
