先把原始代码拿出来摆到这里
<div style="position:absolute;width:350;height:40;left:200;top:500">
<embed src="音乐文件" width="350" height="40" autostart="true" quality="high" wmode="transparent"></embed>
</div>
现在我们利用CSS来美化此播放器代码
1款:
代码:<DIV style="FILTER: alpha(opacity=80,style=2); LEFT: 0px; WIDTH:300px; background-color:#000000;POSITION: relative; TOP: 0px; HEIGHT:60px"><EMBED src=蝴蝶泉边.mp3 width=350 height=40type=audio/x-pn-realaudio-plugin console="Clip1"controls="IMAGEWINDOW,ControlPanel,StatusBar"autostart="true"></EMBED></DIV>
2款:
代码:<DIV style="FILTER: blur(strength=50) flipv() ; LEFT: 0px; WIDTH:300px; POSITION: relative; TOP: 0px; HEIGHT:60px"><EMBED src=蝴蝶泉边.mp3 width=350 height=40type=audio/x-pn-realaudio-plugin console="Clip1"controls="IMAGEWINDOW,ControlPanel,StatusBar"autostart="false"></EMBED></DIV>
3款:
代码:<DIV style="FILTER:gray(); LEFT: 0px; WIDTH:350px; POSITION: relative; TOP: 0px; HEIGHT:40px"><EMBED style="FILTER: glow(color=red,strength=5);" src=蝴蝶泉边.mp3 width=350 height=40type=audio/x-pn-realaudio-plugin console="Clip1"controls="IMAGEWINDOW,ControlPanel,StatusBar"autostart="false"></EMBED></DIV>
4款:
代码:<DIV style="FILTER:invert(); LEFT: 0px; WIDTH:300px; POSITION: relative; TOP: 0px; HEIGHT:60px"><EMBED src=蝴蝶泉边.mp3 width=350 height=40type=audio/x-pn-realaudio-plugin console="Clip1"controls="IMAGEWINDOW,ControlPanel,StatusBar"autostart="false"></EMBED></DIV>
5款:
代码:<DIV style="FILTER: alpha(opacity=80,style=3); LEFT: 0px; WIDTH:350px; background-color:#880000;POSITION: relative; TOP: 0px; HEIGHT:40px"><EMBED src=蝴蝶泉边.mp3 width=350 height=40type=audio/x-pn-realaudio-plugin console="Clip1"controls="IMAGEWINDOW,ControlPanel,StatusBar"autostart="true"></EMBED></DIV>
6款:
代码:<DIV style="FILTER:xray(); LEFT: 0px; WIDTH:350px; POSITION: relative; TOP: 0px; HEIGHT:40px"><EMBED style="FILTER: glow(color=red,strength=5);" src=蝴蝶泉边.mp3 width=350 height=40type=audio/x-pn-realaudio-plugin console="Clip1"controls="IMAGEWINDOW,ControlPanel,StatusBar"autostart="false"></EMBED></DIV>
好了,这里只写到这里了,更多的朋友们参考下CSS滤镜的使用自己发挥吧