6.3 设置网页图像样式

当然也可以使用CSS样式来美化图片。

6.3.1 设置图像边框

border属性用于设置图片边框，代码如下：

      border: width color style

width指定边框的宽度，color指定边框的颜色，style指定边框的样式。

【例6-4】（实例文件：ch06\Chap6.4.html）设置图像边框。

相关的代码实例请参考Chap6.4.html文件，在IE浏览器中运行的结果如图6-5所示。

图6-5 设置图像边框

6.3.2 设置图像不透明度

在CSS中，使用opacity属性设置图片的不透明度，代码如下：

      opacity: value | inherit;

value取值在0～1，0表示完全透明，1表示完全不透明。inherit表示应该继承父元素opacity的属性值。

【例6-5】（实例文件：ch06\Chap6.5.html）设置图像不透明度。

相关的代码实例请参考Chap6.5.html文件，在IE浏览器中运行的结果如图6-6所示。

图6-6 设置图像不透明度

6.3.3 设置圆角图像

border-radius用来设置图像的圆角，代码如下：

      border-radius: 1-4 length|% / 1-4 length|%;

border-radius可以设置4个值，设置一个值时，表示4个角设置相同的圆角。

【例6-6】（实例文件：ch06\Chap6.6.html）设置图像的圆角。

相关的代码实例请参考Chap6.6.html文件，在IE浏览器中运行的结果如图6-7所示。

图6-7 设置圆角图像

6.3.4 设置阴影图像

box-shadow属性用于设置阴影图像，代码如下：

      box、text-shadow：X,Y，blur，color；

X、Y分别表示阴影在水平方向和垂直方向上的位移，blur表示模糊的半径，最后一个表阴影的颜色。

【例6-7】（实例文件：ch06\Chap6.7.html）设置图像阴影。

相关的代码实例请参考Chap6.7.html文件，在IE浏览器中运行的结果如图6-8所示。

图6-8 设置阴影图像

6.3.5 设置图像与文字的对齐方式

设置图像与文字的对齐方式，一般是设置图片与文字垂直方向上的对齐方式，使用vertical-align属性来设置，它的属性值如表6-2所示。

表6-2 vertical-align属性值

【例6-8】（实例文件：ch06\Chap6.8.html）设置图像与文字的对齐方式。

相关的代码实例请参考Chap6.8.html文件，在IE浏览器中运行的结果如图6-9所示。

图6-9 设置图像与文字的对齐方式

6.3.6 图文混排

一个普通的网页最常见的就是图文混排，下面以文字环绕效果为例进行介绍。

在CSS 3中使用float来实现文字环绕效果。

【例6-9】（实例文件：ch06\Chap6.9.html）设置图文混排。

相关的代码实例请参考Chap6.9.html文件，在IE浏览器中运行的结果如图6-10所示。

图6-10 图文混排