4.1 设置图像样式
HTML5为<img>标签定义了多个可选属性，不再推荐使用HTML4中部分属性，如align（水平对齐方式）、border（边框粗细）、hspace（左右空白）、vspace（上下空白），对于这些属性，HTML5建议使用CSS属性代替。
4.1.1 定义图像大小
视频讲解
<img>标签包含width和height属性，使用它们可以控制图像的大小。不过CSS提供了更符合标准的width和height属性，使用这两个属性可以更灵活地设计图像大小。
【示例1】这是一个简单地使用CSS控制图像大小的案例。启动Dreamweaver，新建网页，保存为test1.html，在<body>标签内输入以下代码。
<img class="w200" src="images/1.jpg" />
<img class="w200" src="images/2.jpg" />
<img class="w200" src="images/3.jpg" />
<img src="images/4.jpg" />
在<head>标签内添加<style type="text/css">标签，定义一个内部样式表，然后输入下面样式，以类样式的方式控制网页中图片的显示大小。
.w200 { /* 定义控制图像高度的类样式 */
height:200px;
}
显示效果如图4.1所示，可以看到使用CSS更方便控制图片大小，提升了网页设计的灵活性。当图像大小取值为百分比时，浏览器将根据图像包含框的宽和高进行计算。
【示例2】在这个示例中，统一定义图像缩小50%，然后分别放在网页中和一个固定大小的盒子中，则显示效果截然不同，比较效果如图4.2所示。
图4.1 固定缩放图像
图4.2 百分比缩放图像
提示：当仅为图像定义宽度或高度时，则浏览器能够自动调整纵横比，使宽和高能够协调缩放，避免图像变形。但是一旦同时为图像定义宽和高，就要注意宽高比，否则会失真。
4.1.2 定义图像边框
视频讲解
图像在默认状态下是不会显示边框的，但在为图像定义超链接时会自动显示2～3像素宽的蓝色粗边框。使用border属性可以清除这个边框，代码如下。
<a href="#"><img src="images/login.gif" alt="登录" border="0" /></a>
不推荐上述用法，建议使用CSS的border属性定义。CSS的border属性不仅可以为图像定义边框，而且提供了丰富的边框样式，支持定义边框的粗细、颜色和样式。
【示例1】针对上面的清除图像边框效果，使用CSS定义的代码如下。
img { /* 清除图像边框 */
border:none;
}
使用CSS为<img>标签定义无边框显示，这样就不再需要为每个图像定义0边框的属性。下面分别讲解图像边框的样式、颜色和宽度的详细设置方法。
1. 边框样式
CSS为元素边框定义了众多样式，边框样式可以使用border-style属性来定义。边框样式包括两种：虚线框和实线框。
☑ 虚线框包括dotted（点）和dashed（虚线）。
【示例2】在本示例中，分别定义两个不同的点线和虚线类样式，然后分别应用到两幅图像上，效果如图4.3所示，通过比较可以看到点线和虚线的细微差异。
<style type="text/css">
img {width:250px; margin:12px;} /* 固定图像显示大小 */
.dotted { /* 点线框样式类 */
border-style:dotted;}
.dashed { /* 虚线框样式类 */
border-style:dashed;
}
</style>
<img class="dotted" src="images/1.png" alt="点线边框" />
<img class="dashed" src="images/1.png" alt="虚线边框" />
图4.3 IE浏览器中的点线和虚线比较效果
☑ 实线框包括实线框（solid）、双线框（double）、立体凹槽（groove）、立体凸槽（ridge）、立体凹边（inset）和立体凸边（outset）。其中实线框（solid）是应用最广的一种边框样式。
提示：双线框由两条单线和中间的空隙组成，三者宽度之和等于边框的宽度。但是，双线框的值分配也会存在一些矛盾，无法做到平均分配。如果边框宽度为3px，则两条单线与其间空隙分别为1px；如果边框宽度为4px，则外侧单线为2px，内侧和中间空隙分别为1px；如果边框宽度为5px，则两条单线宽度为2px，中间空隙为1px。其他取值依此类推。
2. 边框颜色和宽度
使用CSS的border-color属性可以定义边框的颜色；使用border-width属性可以定义边框的宽度。当元素的边框样式为none时，所定义的边框颜色和边框宽度都会同时无效。在默认状态下，元素的边框样式为none，而元素的边框宽度默认为2～3px。
【示例3】在本示例中快速定义图像各边的边框，显示效果如图4.4所示。
【示例4】可以配合使用不同的复合属性自定义各边样式，例如，本示例分别用border-style、border-color和border-width属性自定义图像各边边框样式，演示效果如图4.5所示。
图4.4 定义各边边框的样式效果
图4.5 自定义各边边框的样式效果
如果各边样式相同，使用border会更方便设计。例如，下面代码定义各边样式为红色实线框，宽度为20像素。
在上面代码中，border属性中的3个值分别表示边框样式、边框宽度和边框颜色，它们没有先后顺序，可以任意调整顺序。
4.1.3 定义图像不透明度
视频讲解
在CSS3中，使用opacity属性可以设计图像的不透明度。该属性的基本用法如下。
opacity:0～1;
取值范围为0～1，数值越小，透明度越高，0为完全透明，而1表示完全不透明。
早期IE浏览器使用CSS滤镜定义透明度，基本用法如下。
filter:alpha(opacity=0～100);
取值范围为0～100，数值越小，透明度越高，0为完全透明，100表示完全不透明。
【示例】在本示例中，先定义一个透明度样式类，然后把它应用到一个图像中，并与原图进行比较，演示效果如图4.6所示。
图4.6 图像透明度演示效果
4.1.4 定义圆角图像
视频讲解
CSS3新增了border-radius属性，使用它可以设计圆角样式。该属性用法如下。
border-radius:none | <length>{1,4} [ / <length>{1,4} ]?;
border-radius属性初始值为none，适用于所有元素，除了border-collapse属性值为collapse的table元素。取值简单说明如下。
☑ none：默认值，表示元素没有圆角。
☑ <length>：由浮点数字和单位标识符组成的长度值，不可为负值。
为了方便定义元素的4个顶角圆角，border-radius属性派生了以下4个子属性。
☑ border-top-right-radius：定义右上角的圆角。
☑ border-bottom-right-radius：定义右下角的圆角。
☑ border-bottom-left-radius：定义左下角的圆角。
☑ border-top-left-radius：定义左上角的圆角。
提示：border-radius属性可包含两个参数值：第1个值表示圆角的水平半径，第2个值表示圆角的垂直半径，两个参数值通过斜线分隔。如果仅包含1个参数值，则第2个值与第1个值相同，它表示这个角是一个1/4圆角。如果参数值中包含0，则这个角就是矩形，不会显示为圆角。
【示例】在本示例中，分别设计两个圆角类样式，第1个类r1为固定12像素的圆角，第2个类r2为弹性取值50%的椭圆圆角，然后分别应用到不同的图像上。演示效果如图4.7所示。
<style type="text/css">
img { width:300px;border:solid 1px #eee;}
.r1 { border-radius:12px; }
.r2 { border-radius:50%;}
</style>
<img class="r1" src="images/1.png" title="圆角图像" />
<img class="r2" src="images/1.png" title="椭圆图像" />
图4.7 圆角图像演示效果
4.1.5 定义阴影图像
视频讲解
CSS3新增了box-shadow属性，该属性可以定义阴影效果。该属性的用法如下。
box-shadow:none | <shadow> [ , <shadow> ]*;
box-shadow属性的初始值是none，该属性适用于所有元素。取值简单说明如下。
☑ none：默认值，表示元素没有阴影。
☑ <shadow>：该属性值可以使用公式表示为inset && [ <length>{2,4} && <color>?]，其中inset表示设置阴影的类型为内阴影，默认为外阴影。<length>是由浮点数字和单位标识符组成的长度值，可取正负值，用来定义阴影水平偏移、垂直偏移，以及阴影大小（即阴影模糊度）、阴影扩展。<color>表示阴影颜色。
提示：当不设置阴影类型时，默认为投影效果，当设置为inset时，则阴影效果为内阴影。X轴偏移和Y轴偏移定义阴影的偏移距离。阴影大小、阴影扩展和阴影颜色是可选值，默认为黑色实影。box-shadow属性值必须设置阴影的偏移值，否则没有效果。如果需要定义阴影，不需要偏移，此时可以定义阴影偏移为0，这样才可以看到阴影效果。
【示例1】在本示例中，设计一个阴影类样式，定义圆角、阴影显示，设置圆角大小为8像素，阴影显示在右下角，模糊半径为14像素，然后分别应用于第二幅图像上。演示效果如图4.8所示。
<style type="text/css">
img { width:300px; margin:6px;}
.r1 {
border-radius:8px;
-moz-box-shadow:8px 8px 14px #06C; /*兼容Gecko引擎*/
-webkit-box-shadow:8px 8px 14px #06C; /*兼容Webkit引擎*/
box-shadow:8px 8px 14px #06C; /*标准用法*/
}
</style>
<img src="images/1.png" title="无阴影图像" />
<img class="r1" src="images/1.png" title="阴影图像" />
图4.8 阴影图像演示效果
【示例2】box-shadow属性用法比较灵活，可以设计叠加阴影特效。例如，在上面的示例中，修改类样式r1的代码如下，通过多组参数值定义的渐变阴影效果如图4.9所示。
img { width:300px; margin:6px;}
.r1 {
border-radius:12px;
box-shadow:-10px 0 12px red,
10px 0 12px blue,
0 -10px 12px yellow,
0 10px 12px green;
}
图4.9 设计图像多层阴影效果
提示：当设计多个阴影时，需要注意书写顺序，最先写的阴影将显示在最顶层。如在上面这段代码中，先定义一个10px的红色阴影，再定义一个10px大小、10px扩展的阴影。显示结果就是红色阴影层覆盖在黄色阴影层之上，此时如果顶层的阴影太大，就会遮盖底部的阴影。