第十二章图片样式

1、图片边框

在HTML中可以直接通过<img>标记的border属性值为图片添加边框，从而控制边框的粗细，当设置该值为0时，则显示为没有边框。

例所有边框都是黑色的，而且风格十分单一，都是实线，仅仅只是在边框粗细上能够进行调整。

<img src="boluo.jpg" border="0">
<img src="boluo.jpg" border="1">
<img src="boluo.jpg" border="2">
<img src="boluo.jpg" border="3">

在CSS中可以通过border属性为图片添加各种各样的边框，border-style定义边框的样式，如虚线、实线或点划线等，在Dreamweaver中通过语法提示功能，便可轻松获得各种边框样式的值。还可以通过 border-color定义边框的颜色，通过border-width定义边框的粗细。还可以分别设置4个边框的不同样式，即分别设定border-left、border-right、border-top、border-bottom的样式。border 属性还可以将各个值写到同一语句中，用空格分离，这样可以大大减化CSS代码的长度。

<html>
<head>
<title>边框</title>
<style>
<!--
img.test1{
    border-style:dotted;       /*点划线*/
    border-color:#ff9900;     /*边框颜色*/
    border-5px;       /*边框粗细*/
}
img.test2{
    border-style:dashed;
    border-color:blue;
    border-2px;
}

img{
    border-left-style:dotted;         /*4个边框分别设置不同的风格样式*/
    border-left-color:#ff9900;
    border-left-5px;
    border-right-style:dashed;
    border-right-color:#33cc33;
    border-right-2px;
    border-top-style:solid;
    border-top-color:#cc00ff;
    border-top-10px;
    border-bottom-style:groove;   
    border-bottom-color:#666666;
    border-bottom-15px;
    
}
img.test3{
    border:5px double #ff00ff;          /*将各个值合并*/
}
img.test4{
    border-right:5px double #ff00ff;
    border-left:8px solid #0033ff;
}
-->
</style>
</head>
<body>
<img src="banana.jpg" class="test1">
<img src="banana.jpg" class="test2">

<img src="grape.jpg">
<img src="peach.jpg" class="test3">
<img src="peach.jpg" class="test4">
</body>
</html>

2、图片缩放

CSS控制图片的大小与HTML一样，也是通过width和height来实现的，所不同的是CSS中可以使用更多的值。例如当设置width的值为50%时，图片的宽度将调整为父元素宽度的一半。

当仅仅设置了图片的width属性，而没有设置height属性时，图片本身会自动等纵横比例缩放，如果只设定height属性也是一样的道理。只有当同事设定width和height属性时才会不等比例缩放。（相对body的宽度，当浏览器窗口改变其宽度时，图片的大小也会相应地发生变化）

<html>
<head>
<title>图片缩放</title>
<style>
<!--
img.test1{
    50%;      /*相对宽度(即相对于body的宽度)*/
}
img.test2{
    70%;      /*相对宽度和高度*/
    height:110px;
}
-->
</style>
</head>
<body>
<img src="pear.jpg" class="test1">
<img src="cup.jpg"" class="test2">
</body>
</html>

第十二章 图片样式

第十二章图片样式