CSS中的Img樣式

來源:互聯網
上載者:User

一、基礎代碼
<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="原來你也在這裡">


本篇文章來源於 Goldtimes.net 原文連結:http://www.goldtimes.net/teach/view/1081.htm

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.