- CSS3网页设计从入门到精通（微课精编版）
- 前端科技
- 2641字
- 2021-03-26 03:49:46
3.3 设计图像样式
在CSS没有普及前，主要使用<img>标签的属性来控制图像样式，如大小、边框、位置等。使用CSS可以更方便地控制图像显示，设计各种特殊效果，这种用法也符合W3C标准，是现在推荐的用法。
3.3.1 定义图像大小
<img>标签包含width和height属性，使用它们可以控制图像的大小。不过CSS提供了更符合标准的width和height属性，使用这两个属性可以更灵活地设计图像大小。
【示例1】下面是一个简单的使用CSS控制图像大小的示例。
启动Dreamweaver，新建网页，保存为test1.html，在<body>标签内输入以下代码。
在<head>标签内添加<style type="text/css">标签，定义一个内部样式表，然后输入下面样式，以类样式的方式控制网页中图片的显示大小。
显示效果如图3.12所示，可以看到使用CSS更方便控制图片大小，提升了网页设计的灵活性。当图像大小取值为百分比时，浏览器将根据图像包含框的宽和高进行计算。
图3.12 固定缩放图像
【示例2】本示例统一定义图像缩小50%，然后分别放在网页中和一个固定大小的盒子中，则显示效果截然不同，比较效果如图3.13所示。
图3.13 百分比缩放图像
提示：当仅为图像定义宽度或高度时，则浏览器能够自动调整纵横比，使宽和高能够协调缩放，避免图像变形。但是一旦同时为图像定义宽和高，就要注意宽高比，否则会失真。
3.3.2 定义图像边框
图像在默认状态下不会显示边框，但在为图像定义超链接时会自动显示2px～3px宽的蓝色粗边框。使用border属性可以清除这个边框，代码如下：
<a href="#"><img src="images/login.gif" alt="登录" border="0" /></a>
不推荐上述用法，建议使用CSS的border属性定义。CSS的border属性不仅可以为图像定义边框，还提供了丰富的边框样式，支持定义边框的粗细、颜色和样式。
【示例1】针对上面的清除图像边框效果，使用CSS定义则代码如下：
使用CSS为<img>标签定义无边框显示，这样就不再需要为每个图像定义0边框的属性。下面分别讲解图像边框样式、颜色和宽度的详细用法。
1. 边框样式
CSS为元素边框定义了众多样式，边框样式可以使用border-style属性来定义。边框样式包括两种：虚线框和实线框。
（1）虚线框包括dotted（点）和dashed（虚线）。
【示例2】在下面示例中，分别定义两个不同的点线和虚线类样式，然后分别应用到两幅图像上，效果如图3.14所示，通过比较可以看到点线和虚线的细微差异。
图3.14 IE浏览器中点线和虚线的比较效果
（2）实线框包括实线框（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】在下面示例中快速定义图像各边的边框，显示效果如图3.15所示。
图3.15 定义各边边框的样式效果
【示例4】下面示例配合使用不同复合属性自定义各边样式，分别用border-style、border-color和border-width属性自定义图像各边边框样式，效果如图3.16所示。
图3.16 自定义各边边框的样式效果
如果各边样式相同，使用border会更方便设计。
【示例5】下面示例定义各边样式为红色实线框，宽度为20px。
在上面代码中，border属性中的3个值分别表示边框样式、边框宽度和边框颜色，它们没有先后顺序，可以任意调整顺序。
3.3.3 定义不透明度
在CSS3中，使用opacity可以设计图像的不透明度。该属性的基本用法如下：
opacity:0~1;
参数取值范围为0～1，数值越小，透明度越高，0为完全透明，而1表示完全不透明。
提示：早期IE浏览器使用CSS滤镜定义透明度，基本用法如下：
filter:alpha(opacity=0~100);
参数取值范围为0～100，数值越小，透明度越高，0为完全透明，100表示完全不透明。
【示例】在下面这个示例中，先定义一个透明度样式类，然后把它应用到图像中，并与原图进行比较，演示效果如图3.17所示。
图3.17 图像透明度演示效果
3.3.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属性可包含两个参数值：第一个值表示圆角的水平半径，第二个值表示圆角的垂直半径，两个参数值通过斜线分隔。如果仅包含一个参数值，则第二个值与第一个值相同，它表示这个角是一个四分之一圆角。如果参数值包含0，则就是矩形，不会显示为圆角。
【示例】下面示例分别设计两个圆角类样式，第一个类r1为固定12px的圆角，第二个类r2为弹性取值50%的椭圆圆角，然后分别应用到不同的图像上，演示效果如图3.18所示。
图3.18 圆角图像演示效果
3.3.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】在下面这个示例中，设计一个阴影类样式，定义圆角、阴影显示，设置圆角大小为8px，阴影显示在右下角，模糊半径为14px，然后分别应用到第二幅图像上，演示效果如图3.19所示。
图3.19 阴影图像演示效果
【示例2】box-shadow属性用法比较灵活，可以设计叠加阴影特效。例如，在上面示例中，修改类样式r1的代码如下，通过多组参数值定义渐变阴影效果，如图3.20所示。
图3.20 设计图像多层阴影效果
提示：当设计多个阴影时，需要注意书写顺序，最先写的阴影将显示在最顶层。如在上面这段代码中，先定义一个10px的红色阴影，再定义一个10px大小、10px扩展的阴影。显示结果就是红色阴影层覆盖在黄色阴影层之上，此时如果顶层的阴影太大，就会遮盖底部的阴影。