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-width:5px;       /*边框粗细*/
}
img.test2{
    border-style:dashed;
    border-color:blue;
    border-width:2px;
}

img{
    border-left-style:dotted;         /*4个边框分别设置不同的风格样式*/
    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;
    
}
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{
    width:50%;      /*相对宽度(即相对于body的宽度)*/
}
img.test2{
    width:70%;      /*相对宽度和高度*/
    height:110px;
}
-->
</style>
</head>
<body>
<img src="pear.jpg" class="test1">
<img src="cup.jpg"" class="test2">
</body>
</html>