用CSS的padding和border属性为图片设置双边框效果

<style type="text/css">
body {text-align: center; font-family:Verdana;}
.img1 { padding:5px; border:5px solid #333;}
.img2 { padding:5px; border:1px solid #333;}
.img3 { padding:5px; border:5px solid #333; background: #c33;}
</style>

 

  <p><img src="uploadfile/sample.jpg" class="img1" /></p>
    <p><img src="uploadfile/sample.jpg" class="img2" /></p>
  <p><img src="uploadfile/sample1.jpg" class="img3" /></p>

-------------------------------------------------------------------------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>用CSS的padding和border属性为图片设置双边框效果</title>

<style type="text/css">

body {text-align: center; font-family:Verdana;}

.img1 { padding:5px; border:5px solid #333;}

.img2 { padding:5px; border:1px solid #333;}

.img3 { padding:5px; border:5px solid #333; background: #c33;}

</style>

</head>


<body>

<h2>用CSS的padding和border属性为图片设置双边框效果</h2>

  <p><img src="uploadfile/sample.jpg" class="img1" /></p>

    <p><img src="uploadfile/sample.jpg" class="img2" /></p>

  <p><img src="uploadfile/sample1.jpg" class="img3" /></p>

  <h3>标准之路——<a href=http://www.aa25.cn/>www.aa25.cn</a>　转载请注明出处</h3>

</body>

</html>

posted on 2011-10-05 23:21  hack315  阅读(124)  评论(0)    收藏  举报

导航