心得: css濾鏡效果雖然好看好用,但是不實用於網頁製作中,因為它不支援ff與ie6, span>美工們最好不要用於網頁製作中, 那樣會降低自己的技術含量.
方法1:
<span style="position:absolute;width:150;filter:shadow(color=orange);font-size:45pt;color:yellow">文字</span>
方法2:
<p style="font-size:12px;height:12px;color:white;filter:glow(color=black,strength=1);">text描边字</p>
方法3:
<style. type="text/css">
body {font:12px "verdana";filter:alpha(style=1,starty=0,finishy=100,startx=100,finishx=100);background-color:#3366cc;}
span {
position:absolute;
padding:4px;
filter:
dropshadow(offx=1,offy=0,color=white)
dropshadow(offx=0,offy=1,color=white)
dropshadow(offx=0,offy=-1,color=white)
dropshadow(offx=-1,offy=0,color=white);
}
#english {
font-size:14px;}
</style><span id="english">this is the prospect of filter - dropshadow.</span><span>中文描边效果</span>
.font {
font-family: "新宋体";
font-size: 12px;
font-style. normal;
color: #ffff00;
padding:1px;
letter-spacing: 2px;
filter:
dropshadow(offx=1,offy=0,color=black)
dropshadow(offx=0,offy=1,color=black)
dropshadow(offx=0,offy=-1,color=black)
dropshadow(offx=-1,offy=0,color=black);
}方法4:
#text { float:left; color:#c60a12;
filter:dropshadow(offx=1,offy=0,color=#ffffff)
dropshadow(offx=0,offy=1,color=#ffffff)
dropshadow(offx=-1,offy=0,color=#ffffff)
dropshadow(offx=0,offy=-1,color=#ffffff);
}此效果是用css的陰影濾鏡來實現，普通的陰影濾鏡只會產生一個方向的投影，在這裡定義了四個方向的投影，所以產生了描邊的效果。
<p style="font-size:12px;height:12px;color:white;filter:glow(color=black,strength=1);">text描边字</p>
