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

|