CSS修饰效果代码 -

will-vip

浏览: 40924 次
性别:
来自: 广州

最近访客更多访客>>

a612986

连云客

zhangshun2016

江南山水电

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (25)

社区版块

存档分类

CSS修饰效果代码

CSS

23种CSS图片修饰效果代码:
<CENTER><img src="http://bbs.gw.com.cn/UploadFile/2008-9/2008919516673537.gif"></CENTER>
 
1。单线框 
<img src="http://sucai.heima.com/sucai/news/xhtp/24.jpg" style="border:3 solid #ff0000"> 
2。双线框
 
<img src="http://sucai.heima.com/sucai/news/xhtp/24.jpg" style="border:8 double green"> 
3。凸出框
 
<img src="http://sucai.heima.com/sucai/news/xhtp/24.jpg"style="border:25 outset #ff88ff"> 
4。凹进框
 
<img src="http://sucai.heima.com/sucai/news/xhtp/24.jpg" style="border:25 inset #ff88ff"> 
5。邮票框
 
<table style="border:3 dashed #f6ae56" cellspacing="1" cellpadding="0" bgcolor="#f6ae56">
<tr><td bgcolor="#aeffae" width=360 height=180 align=center ><img src="http://sucai.heima.com/sucai/news/xhtp/24.jpg">
</TD></TR></TABLE>
 
6。虚线框
 
<img src="http://sucai.heima.com/sucai/news/xhtp/24.jpg" style="border:4 dashed #ff0000"> 
7。凹槽框
 <img src="http://sucai.heima.com/sucai/news/xhtp/24.jpg" style="border:25 groove green" border="0"> 
8。脊状框
 
<img src="http://sucai.heima.com/sucai/news/xhtp/24.jpg" style="border:25 ridge green" border="0"> 
9。立体阴影框
 
<table width=400 height=400 border=2 cellpadding="15" cellspacing="3" style="filter:progid:DXImageTransform.Microsoft.Shadow(color:#f6ae56,direction:145,strength:15)"> <tr><td bgcolor="#ffffff" align=center valign=middle><img src="http://sucai.heima.com/sucai/news/xhtp/24.jpg"> 
</TD></TR></TBODY></TABLE>
10。阴影框
 
<img src="http://sucai.heima.com/sucai/news/xhtp/24.jpg" style="filter:shadow(color=#32cd32)"> 
11。横向渐变透明
 
<img src="http://sucai.heima.com/sucai/news/xhtp/24.jpg" style="filter=alpha(opacity=100,style=1,finishopacity=0)"> 
12。圆形渐变透明
 
<img src="http://sucai.heima.com/sucai/news/xhtp/24.jpg" style="filter=alpha(opacity=100,style=2,finishopacity=0)"> 
13。X形渐变透明
 
<img src="http://sucai.heima.com/sucai/news/xhtp/24.jpg" style="filter=alpha(opacity=100,style=3,finishopacity=0)"> 
14。改变某种颜色
 
<img src="http://sucai.heima.com/sucai/news/xhtp/24.jpg"style="FILTER: Chroma(Color=#13629f)"> 
15。黑白效果
 
<img src="http://sucai.heima.com/sucai/news/xhtp/24.jpg" style="filter:'gray'"> 
16。X光效果（底片）
 
<img src="http://sucai.heima.com/sucai/news/xhtp/50.jpg" style="filter:'xray'"> 
17。浮雕效果
 
<img src="http://sucai.heima.com/sucai/news/xhtp/50.jpg" style="filter:progid:DXImageTransform.Microsoft.Emboss()"> 
18。上下颠倒
 
<img src="http://sucai.heima.com/sucai/news/xhtp/50.jpg" style="filter:flipv"> 
19。左右颠倒
 
<img src="http://sucai.heima.com/sucai/news/xhtp/50.jpg" style="filter:fliph"> 
20。色彩颠倒
 
<img src="http://sucai.heima.com/sucai/news/xhtp/24.jpg" style="filter:invert"> 
21。粒状阴影
 
<img src="http://sucai.heima.com/sucai/news/xhtp/24.jpg" style="filter:progid:DXImageTransform.Microsoft.Glow(color=#cc8888,strength=30)">
 
22。模糊效果
 
<img src="http://sucai.heima.com/sucai/news/xhtp/24.jpg" style="filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius=10)"> 
23。水波效果（风吹）
 
<img src="http://sucai.heima.com/sucai/news/xhtp/24.jpg" style="filter:wave(freq=11, strength=4, phase=6, lightstrength=10)"></center>
 

<CENTER><img src="http://bbs.gw.com.cn/UploadFile/2008-9/20089195151190032.gif"></CENTER>

文字修饰特效：
1、Glow：在文字的边外加光辉效果代码：
<CENTER>
<div style="FILTER: Glow(color=#0000ff,strength=12); HEIGHT: 6pt">

如画江山</div>
</CENTER>

（二）Drop Shadow滤镜修饰的文字重叠效果代码：
<CENTER>
<div style="FONT-SIZE:70pt;filter:dropshadow(color=#000000,offX=5,offY=3,Positive=1);WIDTH:100%; COLOR:#60A000;LINE-HEIGHT:150%">
社会主义好！
</div></CENTER>

（三）Shadow滤镜修饰的文字阴影果代码：
<CENTER>
<div style="FONT-SIZE:70pt;filter:shadow(color=black,direction=180);WIDTH:100%; COLOR:#60A000;LINE-HEIGHT:150%">
社会主义好！
</div></CENTER>

（四）Shadow滤镜修饰的文字阴影果代码２：
<CENTER>
<DIV style="FONT-SIZE: 100pt; FILTER: shadow(color=#af2dco); WIDTH: 100%; COLOR: #730404; LINE-HEIGHT: 150%">

网络世界
</DIV></CENTER>

（五）Shadow滤镜修饰的文字阴影效果代码３：
<CENTER>
<DIV style="FONT-SIZE:70pt;filter:dropshadow(color=000066,offX=-5,offY=-3,Positive=1);WIDTH:100%; COLOR:#FF0000;LINE-HEIGHT:120%">

　社会主义好！
</DIV></CENTER>

（六）Shadow滤镜修饰的文字阴影效果代码4：
<CENTER>

春风秋雨</CENTER>

（七）Wave滤镜修饰文字变幻效果代码：
<center>
<div style="FONT-SIZE:50pt;filter:wave(add=0,lightstrength=50,strength=6,freq=2,phrase=50);WIDTH:100%; COLOR:red;LINE-HEIGHT:150%">

长空雁叫霜晨月</div>
</center>

分享到：