CSS圆角技术

<!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>
    <style type="text/css">
      *{margin:0;padding:0;}
      body{font-size:12px;padding:10px;}

      .tl,.tr,.bl,.br{position:absolute;width:20px;height:20px;background:url(corner.gif) no-repeat; }
      .box1,.box2{position:relative;width:80%;padding:20px;}

      .box1{background:#860000;}
      .box2{border:1px solid #860000;}

      .box1 .tl{top:0;left:0;background-position:0 0;}
      .box1 .tr{top:0;right:0;background-position:-20px 0;}
      .box1 .bl{bottom:0;left:0;background-position:0 -20px;}
      .box1 .br{bottom:0;right:0;background-position:-20px -20px;}

      .box2 .tl{top:-1px;left:-1px;background-position:-60px -20px;}
      .box2 .tr{top:-1px;right:-1px;background-position:-40px -20px;}
      .box2 .bl{bottom:-1px;left:-1px;background-position:-60px 0;}
      .box2 .br{bottom:-1px;right:-1px;background-position:-40px 0;}
    </style>
  </head>
  <body>
    <div class="box1">
      <h3>CSS圆角技术</h3>
      <p>CSS圆角技术</p>
      <div class="tl"></div>
      <div class="tr"></div>
      <div class="bl"></div>
      <div class="br"></div>
    </div>
    <br />
    <div class="box2">
      <h3>CSS圆角技术</h3>
      <p>CSS圆角技术</p>
      <div class="tl"></div>
      <div class="tr"></div>
      <div class="bl"></div>
      <div class="br"></div>
    </div>
  </body>
</html>

 

示例图:

 

CSS圆角技术

你可能感兴趣的:(html,XHTML,css)