CSS中的Img样式
分类： CSS2011-08-17 17:17 31人阅读 评论(0) 收藏 举报
一、基础代码
<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 >
②<img src="/picture/css20080501.jpg" width=224 >
③<img src="/picture/css20080501.jpg" width=224 >
④<img src="/picture/css20080501.jpg" width=224 >
⑤<img src="/picture/css20080501.jpg" width=224 >
⑥<img src="/picture/css20080501.jpg" width=224 >
⑦<img src="/picture/css20080501.jpg" width=224 >挂失声明
⑧<img src="/picture/css20080501.jpg" width=224 >
① ② ③ ④ ⑤ ⑥ ⑦ ⑧
三、加CSS滤镜
1、无参数滤镜
①黑白
<IMG src="/picture/css20080501.jpg" width=224>
②底片
<IMG src="/picture/css20080501.jpg" width=224>
③X光片
<IMG src="/picture/css20080501.jpg" width=224>
④水平翻转
<IMG src="/picture/css20080501.jpg" width=224>
⑤垂直翻转
<IMG src="/picture/css20080501.jpg" width=224>
① ② ③ ④ ⑤
2、透明效果（opacity=100 透明度0—100）
①<IMG src="/picture/css20080501.jpg" width=224>
②<IMG src="/picture/css20080501.jpg" width=224>
③<IMG src="/picture/css20080501.jpg" width=224>
④<IMG src="/picture/css20080501.jpg" width=224>
① ② ③ ④
3、其他特效
①浮雕
<IMG src="/picture/css20
b707080501.jpg" width=224>
②波纹
<IMG src="/picture/css20080501.jpg" width=224>
<IMG src="/picture/css20080501.jpg" width=224>
（Add=是否打乱1或0；Freq=频率；LightStrength=光效强度；Pha=偏移量；Strength=振幅）
四座敞篷
③模糊
隆重开业<IMG src="/picture/css20080501.jpg" width=224>
<IMG src="/picture/css20080501.jpg" width=224>
（Add=是否模糊1或0；Direction=方向；Strength=强度）
④发光
<IMG src="/picture/css20080501.jpg" width=224>
<IMG src="/picture/css20080501.jpg" width=224>
（Color=颜色；Strength=强度）
⑤阴影景阳冈课文原文
<IMG src="/picture/css20080501.jpg" width=224>
<IMG src="/picture/css20080501.jpg" width=224>
（Color=颜色；Direction=方向；Strength=强度）约会
⑥投影
<IMG 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 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="原来你也在这里">
