用CSS设置图片效果

For personal use only in study and research; not for commercial use
用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.}
第4种就是将各个属性值合并
2，图片缩放
Java代码
1.img.test1 {
2.width: 50%; /*相对宽度*/
3.height: 300px; /*绝对高度*/
4.}
二、图片的对齐
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="test
1"></div>
3.<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="ver
tical-align: sub;" border="1">方式</div>
5.<div style="text-align: left;">super<img src="bike.gif" style="v
ertical-align: super;" border="1">方式</div>
6.<div style="text-align: left;">text-bottom<img src="bike.gif" st
yle="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="ver
tical-align: top;" border="1">方式</div>
9.<div style="text-align: left;">5px<img src="bike.gif" style="ver
tical-align: 5px;" border="1">方式</div>
10.<div style="text-align: left;">-10px<img src="bike.gif" style="v
ertical-align: -10px;" border="1">方式</div>
11.<div style="text-align: left;">0px<img src="bike.gif" style="ver
tical-align: 0px;" border="1">方式</div>
三、图文混排
1，文字环绕
Java代码
1.<img src="test.jpg" style="float: left;">testtestasetesateastesat
esates<p>afdsfsd</p>12312313<p>sadfsdafsd</p>
2，图片与文字间距
Java代码
1.img {
2.margin-right: 50px;
3.margin-bottom: 25px;
4.}
仅供个人用于学习、研究；不得用于商业用途。

For personal use only in study and research; not for commercial use.
Nur für den persönlichen für Studien, Forschung, zu kommerziellen Zwecken verwendet werden.
Pour l 'étude et la recherche uniquement à des fins personnelles; pas à des fins commerciales.
толькодля людей, которые используются для обучения, исследований и не должны использоваться в коммерческих целях.
以下无正文。