CSS中的Img样式

最新推荐文章于 2024-07-05 23:24:20 发布

shanliangliuxing

最新推荐文章于 2024-07-05 23:24:20 发布

阅读量2.7k

点赞数 1

分类专栏： Web前端开发文章标签： css filter border 浏览器

Web前端开发专栏收录该内容

72 篇文章

订阅专栏

本文深入探讨了CSS中的边框样式、滤镜效果、定位及添加说明的方法，并通过实例展示了如何为图像添加各种样式，包括边框、滤镜、定位与说明，帮助开发者实现更丰富的视觉效果。

一、基础代码
<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="原来你也在这里">