用CSS设置图片效果.doc

用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. <div style="text-align: left;"><img src="bike.gif" class="test1"></div>   
2. <div style="text-align: center;"><img src="bike.gif" class="test1"></div>   
3. <div style="text-align: right;"><img src="bike.gif" class="test1"></div>  
<div style="text-align: left;"><img src="bike.gif" class="test1"></div>
<div style="text-align: center;"><img src="bike.gif" class="test1"></div>
<div style="text-align: right;"><img src="bike.gif" class="test1"></div>

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

2，纵向对齐
Java代码  
1. <div style="text-align: left;">baseline<img src="bike.gif" style="vertical-align: baseline;" border="1">方式</div>   
2. <div style="text-align: left;">bottom<img src="bike.gif" style="vertical-align: bottom;" border="1">方式</div>   
3. <div style="text-align: left;">middle<img src="bike.gif" style="vertical-align: middle;" border="1">方式</div>   
4. <div style="text-align: left;">sub<img src="bike.gif" style="vertical-align: sub;" border="1">方式</div>   
5. <div style="text-align: left;">super<img src="bike.gif" style="vertical-align: super;" border="1">方式</div>   
6. <div style="text-align: left;">text-bottom<img src="bike.gif" style="vertical-align: text-bottom;" border="1">方式</div>   
7. <div style="text-align: left;">text-top<img src="bike.gif" style="vertical-align: text-top;" border="1">方式</div>   
8. <div style="text-align: left;">top<img src="bike.gif" style="vertical-align: top;" border="1">方式</div>   
9. <div style="text-align: left;">5px<img src="bike.gif" style="vertical-align: 5px;" border="1">方式</div>   
10. <div style="text-align: left;">-10px<img src="bike.gif" style="vertical-align: -10px;" border="1">方式</div>   
11. <div style="text-align: left;">0px<img src="bike.gif" style="vertical-align: 0px;" border="1">方式</div>  
<div style="text-align: left;">baseline<img src="bike.gif" style="vertical-align: baseline;" border="1">方式</div>
<div style="text-align: left;">bottom<img src="bike.gif" style="vertical-align: bottom;" border="1">方式</div>
<div style="text-align: left;">middle<img src="bike.gif" style="vertical-align: middle;" border="1">方式</div>
<div style="text-align: left;">sub<img src="bike.gif" style="vertical-align: sub;" border="1">方式</div>
<div style="text-align: left;">super<img src="bike.gif" style="vertical-align: super;" border="1">方式</div>
<div style="text-align: left;">text-bottom<img src="bike.gif" style="vertical-align: text-bottom;" border="1">方式</div>
<div style="text-align: left;">text-top<img src="bike.gif" style="vertical-align: text-top;" border="1">方式</div>
<div style="text-align: left;">top<img src="bike.gif" style="vertical-align: top;" border="1">方式</div>
<div style="text-align: left;">5px<img src="bike.gif" style="vertical-align: 5px;" border="1">方式</div>
<div style="text-align: left;">-10px<img src="bike.gif" style="vertical-align: -10px;" border="1">方式</div>
<div style="text-align: left;">0px<img src="bike.gif" style="vertical-align: 0px;" border="1">方式</div>

三、图文混排
1，文字环绕
Java代码  
1. <img src="test.jpg" style="float: left;">testtestasetesateastesatesates<p>afdsfsd</p>12312313<p>sadfsdafsd</p>  
<img src="test.jpg" style="float: left;">testtestasetesateastesatesates<p>afdsfsd</p>12312313<p>sadfsdafsd</p>

2，图片与文字间距
Java代码  
1. img {   
2.   margin-right: 50px;   
3.   margin-bottom: 25px;   
4. }  
img {
margin-right: 50px;
margin-bottom: 25px;
}