设置图片样式-盈岚科技

设置图片样式

2019-09-24 10:37:21
阅读次数：次
作者：盈岚科技小编
来源：http://www.lyjtt.cn

在网页设计时，图片的效果很大程度上影响到网页效果，要使网页图文并茂并且布局结构合理，就要注意图片的设置。通过CSS统一管理，不但可以更加精确地调整图片的各种属性，还可以实现很多特殊效果。本节将对图片的边框、图片的大小与缩放、图片对齐等属性进行介绍。

定义图片边框

在HTML语法中，可以直接通过<.img>标签的border属性来为图片添加边框，语法如下：<img src="图片路径" border="数值">

【示例1】

启动Dreamweaver，新建一个网页，保存为test.html，在<body>标签内输入以下代码：

<img src="images/11.jpg" border="3">按F12键，在浏览器中预览。

可以看到，用HTML控制图片边框是无法设计出丰富多彩的图片效果的，需要使用CSS中的border-style、border-color和border-width 3个属性来定义边框。其语法如下：

border-style:参数;

border-color:参数;

border-width:数值;

border-style属性用于设置边框的样式，用的最多的两个参数是dotted表示点划线，用dashed表示虚线，其他的一些值会在后面的章节中详细说明。在网站建设中，border-color属性用于设置边框的颜色。bor-der-width属性用于设置边框的宽度。

【示例2】启动Dreamweaver，新建一个网页，保存为test1.html，在<body>标签内输入以下代码：

在<head>标签内添加<style type="text/css">标签，定义一个内部样式表，然后输入下面样式，用来定义图片边框样式。

.pic1 { border-style: dotted; /*点划线*/

border-color: #000066; /*边框颜色*/

border-width: 2px; /*边框粗细*/}

.pic2 { border-style: dashed; /*点划线*/

border-color: #FF0000; /*边框颜色*/

border-width: 10px; /*边框粗细*/}

【示例3】下面示例为图像四边设计不同的边框样式。

在CSS中，还可以分别设置4个边框的不同样式，即分别设置border-left、border-right、border-top、border-bottom的样式。启动Dreamweaver，新建一个网页，保存为test2.html，在<body>标签内输入以下代码：

在<head>标签内添加<style type="text/css">标签，定义一个内部样式表，然后输入下面样式，用来定义图片边框样式。

img { border-left-style: dotted; /*左点划线*/

border-left-color: #FF9900; /*左边框颜色*/

border-left-width: 5px; /*左边框粗细*/

border-right-style: dashed;

border-right-color: #33CC33;

border-right-width: 2px;

border-top-style: solid; /*上实线*/

border-top-color: #CC00FF; /*上边框颜色*/

border-top-width: 10px; /*上边框粗细*/

border-bottom-style: groove;

border-bottom-color: #666666;

border-bottom-width: 15px;}

【示例4】在示例3中介绍了分别设置4个边框的方法，border属性还可以将各个值写到同一语句，用空格分隔，这样可以大大缩短代码长度。

启动Dreamweaver，新建一个网页，保存为test3.html，在<body>标签内输入以下代码：

在<head>标签内添加<style type="text/css">标签，定义一个内部样式表，然后输入下面样式，用来定义图片边框样式。

.pic1 { border: 5px double #FF00FF; /*将各个值合并*/}.pic2 {

border-right: 5px double #000; border-left: 8px solid #45673A;}

可以看到代码的长度明显减少，这样不但清晰易读，而且大大加快了网页下载速度。

【拓展】示例4是将border的各个属性值写到一起，有的时候还会出现这样的语句：border-style:dotted solid dashed doubel、border-width:5px10px，这种设置方法也是正确的，但是上面这种语句如果写成这样：border:dotted solid dasheddoubel、borderh:5px 10px，就不对了。

制作网页时，在设置边框样式时，如果border-style、border-width、bor-der-color只设置一个参数，则该参数将作用于4个边，即4个边的样式风格一样；如果设置两个参数，则第一个参数作用于上、下边框，第二个参数作用于左、右边框；如果设置3个参数，则第一个参数作用于上边框，第二个参数作用于左、右边框，第三个参数作用于下边框；如果设置4个参数，则按照上-右-下-左的顺序作用于各个边框。

pic1 { border-style: dotted solid; /*上、下边框为dotted，左、右边框为solid*/

border-width: 5px 10px 8px 3px; /*上边框为5px，右边框为10px，下右边框为8px，左边框为3px*/

border-color: #009966 #000; /*分别设置上、下和左、右边框颜色*/}

.pic2 { border: 5px double #000; /*合并border的各个属性*/}

CSS中很多其他的属性也可以进行类似的操作，例如margin和padding:padding:0px 5px、margin:0px 10px 3px 20px。

提示：在设置border-style、border-color和border-width时，设置的顺序是有讲究的，在设置border(-?)color和border-width之前必须先设置border-style，否则border-color和border-width的效果将不会显示。