CSS中的Img样式

 

一、基础代码<IMG src="/picture/css20080501.jpg" width=224>二、加边框1、普通黑色边框（浏览器默认黑色）<img src="/picture/css20080501.jpg" width=224 border=12>2、简单的CSS装饰框①<img src="/picture/css20080501.jpg" width=224 style="border:12px #987cb9 solid">②<img src="/picture/css20080501.jpg" width=224 style="border:12px #987cb9 dashed">③<img src="/picture/css20080501.jpg" width=224 style="border:12px #987cb9 dotted">④<img src="/picture/css20080501.jpg" width=224 style="border:12px #987cb9 double">⑤<img src="/picture/css20080501.jpg" width=224 style="border:12px #987cb9 groove">⑥<img src="/picture/css20080501.jpg" width=224 style="border:12px #987cb9 ridge">⑦<img src="/picture/css20080501.jpg" width=224 style="border:12px #987cb9 inset">⑧<img src="/picture/css20080501.jpg" width=224 style="border:12px #987cb9 outset">①　②　③　④　⑤　⑥　⑦　⑧三、加CSS滤镜1、无参数滤镜①黑白<IMG style="FILTER: gray()" src="/picture/css20080501.jpg" width=224>②底片<IMG style="FILTER: xray()" src="/picture/css20080501.jpg" width=224>③X光片<IMG style="FILTER: invert()" src="/picture/css20080501.jpg" width=224>④水平翻转<IMG style="FILTER: fliph()" src="/picture/css20080501.jpg" width=224>⑤垂直翻转<IMG style="FILTER: flipv()" src="/picture/css20080501.jpg" width=224>①　②　③　④　⑤2、透明效果（opacity=100 透明度0—100）①<IMG style="FILTER: Alpha(opacity=100,style=1)" src="/picture/css20080501.jpg" width=224>②<IMG style="FILTER: Alpha(opacity=100,style=2)" src="/picture/css20080501.jpg" width=224>③<IMG style="FILTER: Alpha(opacity=100,style=3)" src="/picture/css20080501.jpg" width=224>④<IMG style="FILTER: Alpha(opacity=0,finishopacity=100,style=1)" src="/picture/css20080501.jpg" width=224>①　②　③　④3、其他特效①浮雕<IMG style="FILTER:progid:DXImageTransform.Microsoft.Emboss()" src="/picture/css20080501.jpg" width=224>②波纹<IMG style="FILTER:progid:DXImageTransform.Microsoft.Wave()" src="/picture/css20080501.jpg" width=224><IMG style="FILTER:Wave(Add=0,Freq=5,LightStrength=10,Phase=2,Strength=20)" src="/picture/css20080501.jpg" width=224>（Add=是否打乱1或0；Freq=频率；LightStrength=光效强度；Phase=偏移量；Strength=振幅）　③模糊<IMG style="FILTER:progid:DXImageTransform.Microsoft.Blur()" src="/picture/css20080501.jpg" width=224><IMG style="FILTER:Blur(Add=1,Direction=45,Strength=150)" src="/picture/css20080501.jpg" width=224>（Add=是否模糊1或0；Direction=方向；Strength=强度）　④发光<IMG style="FILTER:progid:DXImageTransform.Microsoft.Glow()" src="/picture/css20080501.jpg" width=224><IMG style="FILTER:progid:DXImageTransform.Microsoft.Glow(Color=#987cb9,Strength=10)" src="/picture/css20080501.jpg" width=224>（Color=颜色；Strength=强度）　⑤阴影<IMG style="FILTER:progid:DXImageTransform.Microsoft.Shadow()" src="/picture/css20080501.jpg" width=224><IMG style="FILTER:progid:DXImageTransform.Microsoft.Shadow(Color=#987cb9,Direction=135,Strength=10)" src="/picture/css20080501.jpg" width=224>（Color=颜色；Direction=方向；Strength=强度）　⑥投影<IMG style="FILTER:progid:DXImageTransform.Microsoft.DropShadow()" src="/picture/css20080501.jpg" width=224><IMG style="FILTER:progid:DXImageTransform.Microsoft.DropShadow(Color=#987cb9,Offx=10,Offy=5,Positive=1)" src="/picture/css20080501.jpg" width=224>（Color=颜色；offx=横向位移；offy=纵向位移；Positive=非透明或透明像素建立可见投影1或0）　⑦镂空<IMG style="FILTER: Mask()" src="/picture/css20080501.jpg">　原图对照图(在上面,看不到哦)四、图片定位（align=right图片居右 hspace水平间距 vspace垂直间距）<img src="/picture/css20080501.jpg" width=224 align=right hspace="5" vspace="5">五、添加图片说明<img src="/picture/css20080501.jpg" width=224 alt="原来你也在这里">