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>