用CSS设置图片效果

一、图片样式 

1，图片边框 

Java代码  

1.img.test1 {   

2.  border-style: dotted;     /*点划线*/  

3.  border-color: #FF9900;    /*边框颜色*/  

4.  border-width: 5px;        /*边框粗细*/  

5.}   

6.img.test2 {   

7.  border-style: dashed;     /*虚线*/  

8.  border-color: blue;    /*边框颜色*/  

9.  border-width: 2px;        /*边框粗细*/  

10.}   

11.img.test3 {   

12.  border-style: dotted;         /*左边框点划线*/  

13.  border-left-color: #FF9900;   /*左边框颜色*/  

14.  border-left-width: 5px;       /*左边框粗细*/  

15.  border-right-style: dashed;   /*右边框虚线*/  

16.  border-right-color: #33CC33;  /*右边框颜色*/  

17.  border-right-width: 2px;      /*右边框粗细*/  

18.  border-top-style: solid;      /*上边框实线*/  

19.  border-top-color: #CC00FF;    /*上边框颜色*/  

20.  border-top-width: 10px;       /*上边框粗细*/  

21.  border-bottom-style: groove;  /*下边框3D凹槽*/  

22.  border-bottom-color: #666666; /*下边框颜色*/  

23.  border-bottom-width: 15px;    /*下边框粗细*/  

24.}   

25.img.test4 {   

26.  border: 5px double #FF00FF   

27.}  

img.test1 {

  border-style: dotted;     /*点划线*/

  border-color: #FF9900;    /*边框颜色*/

  border-width: 5px;        /*边框粗细*/

}

img.test2 {

  border-style: dashed;     /*虚线*/

  border-color: blue;    /*边框颜色*/

  border-width: 2px;        /*边框粗细*/

}

img.test3 {

  border-style: dotted;         /*左边框点划线*/

  border-left-color: #FF9900;   /*左边框颜色*/

  border-left-width: 5px;       /*左边框粗细*/

  border-right-style: dashed;   /*右边框虚线*/

  border-right-color: #33CC33;  /*右边框颜色*/

  border-right-width: 2px;      /*右边框粗细*/

  border-top-style: solid;      /*上边框实线*/

  border-top-color: #CC00FF;    /*上边框颜色*/

  border-top-width: 10px;       /*上边框粗细*/

  border-bottom-style: groove;  /*下边框3D凹槽*/

  border-bottom-color: #666666; /*下边框颜色*/

  border-bottom-width: 15px;    /*下边框粗细*/

}

img.test4 {

  border: 5px double #FF00FF

}

第4种就是将各个属性值合并 

2，图片缩放 

Java代码  

1.img.test1 {   

2.  width: 50%;      /*相对宽度*/  

3.  height: 300px;   /*绝对高度*/  

4.}  

img.test1 {

  width: 50%;      /*相对宽度*/

  height: 300px;   /*绝对高度*/

}

二、图片的对齐 

1，横向对齐 

Java代码  

1.   

2.   

3.  

只能通过设置父元素的text-align属性来设置图片的横向对齐 

2，纵向对齐 

Java代码  

1.baseline方式   

2.bottom方式   

3.middle方式   

4.sub方式   

5.super方式   

6.text-bottom方式   

7.text-top方式   

8.top方式   

9.5px方式   

10.-10px方式   

11.0px方式  

baseline方式

bottom方式

middle方式

sub方式

super方式

text-bottom方式

text-top方式

top方式

5px方式

-10px方式

0px方式

三、图文混排 

1，文字环绕 

Java代码  

1.testtestasetesateastesatesates

afdsfsd

sadfsdafsd

testtestasetesateastesatesates

afdsfsd

sadfsdafsd

2，图片与文字间距 

Java代码  

1.img {   

2.  margin-right: 50px;   

3.  margin-bottom: 25px;   

4.}  

img {

  margin-right: 50px;

  margin-bottom: 25px;

}