CSS滤镜:Shadow属性

　2008-03-09 11:36:35　来源：WEB开发网　闂傚倸鍊风欢姘缚瑜嶈灋闁圭虎鍠栫粻顖炴煥閻曞倹瀚�

闂傚倸鍊风粈渚€骞夐敓鐘插瀭闁汇垹鐏氬畷鏌ユ煙閹殿喖顣奸柛搴＄У閵囧嫰骞掗幋婵冨亾閻㈢ǹ纾婚柟鐐灱濡插牊绻涢崱妤冃℃繛宀婁簽缁辨捇宕掑鎵佹瀸闂佺懓鍤栭幏锟�

濠电姷鏁告慨顓㈠箯閸愵喖宸濇い鎾寸箘閹规洟姊绘笟鈧ḿ褍煤閵堝悿娲Ω閳轰胶鍔﹀銈嗗笂閼冲爼鍩婇弴銏＄厪闁搞儮鏅涙禒褏绱掓潏鈺佷槐闁轰焦鎹囬弫鎾绘晸閿燂拷闂傚倸鍊风欢姘缚瑜嶈灋闁圭虎鍠栫粻顖炴煥閻曞倹瀚�　　闂傚倸鍊烽懗鑸电仚缂備胶绮〃鍛村煝瀹ュ鍗抽柕蹇曞У閻庮剟姊虹紒妯哄闁圭⒈鍋嗛惀顏囶樄闁哄本娲樼换婵婄疀閺囩姷鐛ラ梻浣哄帶婢瑰﹥绂嶅⿰鍫氣偓鏃堝礃椤忎礁浜鹃柨婵嗛婢ь喖霉閻樻瑥瀚粻楣冩煕椤愩倕鏋庨柣蹇嬪劜閵囧嫰寮村Ο鍝勫Е濡炪們鍨洪悷鈺呭箖閳╁啯鍎熼柕鍥у簻閹凤拷

核心提示：Shadow属性可以在指定的方向建立物体的投影，它的表达式是这样的： Filter：Shadow（Color=color，CSS滤镜:Shadow属性，Direction=direction）在这里，Shadow有两个参数值：Color参数用来指定投影的颜色；Direction参数用来指定投影的方向，阴影颜色、投影方

Shadow属性可以在指定的方向建立物体的投影。它的表达式是这样的：

　　Filter：Shadow（Color=color，Direction=direction）

　　在这里，Shadow有两个参数值：Color参数用来指定投影的颜色；Direction参数用来指定投影的方向。
　　这里说的方向与我们在第二节Blur属性中提到的“方向与角度的关系”是一样的。　　也许您会问，前面讲到的Dropshadow属性和Shadow属性有什么不同吗？
　　光说的话，您恐怕还难以理解，让我们看一看分别利用这两个属性做出来的效果有什么不同（见下图）：

　　　　　　　　　Shadow效果　　　　　　　　Dropshadow效果

　　这样一对比，就可以很明显的看出两者的不同。
　　Shadow属性可以在任意角度进行投射阴影，Dropshadow属性实际上是用偏移来定义阴影的。所以，看上去左图的文字和阴影就像是一体的，而右图的文字就像脱离了阴影一样。
　　本例的代码如下：

<html>
　　　<head>
　　　<title> shadow</title>
　　　<style>//*开始设置CSS样式*//
　　　
　　 </style>
　　 </head>
　　 <body>
　　 <div class=“shadow”>//*区域内为Shadow类*//
　　 <p style=“font-family：bailey；font-size：48pt；
　　　　　　　　font-weight：bold；color：#FF9900；”>
　　　 Hongen Online</p>//*定义字体名称、大小、粗细、前景色*//
　　　</div>
　　　<div class=“dropshadow”>//*区域内为Dropshadow类*//
　　　<p style=“font-family：bailey；font-size：48pt；
　　　　　　　　 font-weight：bold；color：#FF9900；”>
　　　 Hongen Online</p>//*定义字体样式与Shadow类的一样*//
　　　</div>
　　　</body>
　　</html>