第十一章用CSS设置图像效果

1.设置图片边框

HTML中可以直接通过标记的border属性值为图片添加边框。但是具体的边框的颜色，样式等等均无法设置。

1.1 基本属性

CSS中一个边框由3个要素组成：

1）border-width（粗细）

2）border-color（颜色）

3）border-style（线性）

下面是一个简单的案例：

效果如图，第一个金黄色、4像素宽的点画线，第二个是蓝色，2像素宽的虚线。

1.2 为不同边框分别设置样式

在CSS中可以通过border-left、border-right、border-top、border-bottom。

每条边都可以设置其粗细、颜色和线性。

在使用熟练之后，border的各个属性值可以简化成一句话，中间用空格分离。

2.图片缩放

CSS中可以通过width和height来控制图片宽高

注意：当仅仅设置width属性，而没有设置height属性时。图片本身会自动等纵横比例缩放；如果设定height属性，也是一样的道理。只有当同时设定width和height属性时才不会等比例缩放。

3.图文混排

3.1 文字环绕

对图像使用float:right，使得它在页面右侧，文字对它环绕排版。也可以在左边。

3.2 设置图片与文字的间距

如果希望图片与文字有一定的距离，只需要给标记添加margin或者padding属性即可。

4.设置图片与文字的对齐方式

4.1 横向对齐方式

通过text-align属性来设置，属性值有left、center、right

4.2 纵向对齐方式

通过vertical-align来设置

<html>

<head>

<title>竖直对齐</title>

<style type="text/css">

p{

font-size:15px;

border:1px red solid;

}

img{

border: 1px solid #000055;

}

</style>

</head>

<body>

<p>竖直对齐<img src="001.jpg"
style="vertical-align:baseline">方式：baseline<img src="002.jpg"
style="vertical-

align:baseline">方式</p>

<p>竖直对齐<img src="001.jpg"
style="vertical-align:top">方式：top<img src="002.jpg"
style="vertical-align:top">方式

</p>

<p>竖直对齐<img src="001.jpg"
style="vertical-align:middle">方式：middle<img src="002.jpg"
style="vertical-

align:middle">方式</p>

<p>竖直对齐<img src="001.jpg"
style="vertical-align:bottom">方式：bottom<img src="002.jpg"
style="vertical-

align:bottom">方式</p>

<p>竖直对齐<img src="001.jpg"
style="vertical-align:text-bottom">方式：text-bottom<img
src="002.jpg"

style="vertical-align:text-bottom">方式</p>

<p>竖直对齐<img src="001.jpg"
style="vertical-align:text-top">方式：text-top<img src="002.jpg"
style="vertical-

align:text-top">方式</p>

<p>竖直对齐<img src="001.jpg"
style="vertical-align:sub">方式：sub<img src="002.jpg"
style="vertical-align:sub">方式

</p>

<p>竖直对齐<img src="001.jpg"
style="vertical-align:super">方式：super<img src="002.jpg"
style="vertical-

align:super">方式</p>

</body>

</html>