<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en">
<html>
<head>
  <title>css制作圆角</title>
  <meta name="author" content="tianqu">
  <meta name="keywords" content="">
  <meta name="description" content="">
  <style type="text/css">
.round{display:block}
.round *{
  display:block;
  height:1px;
  overflow:hidden;
  font-size:.01em;
  background:#e7ff94;
}
.round1{
  margin:0 4px;
  border:1px solid #ff2000;
  background:#ff2000;/*头尾边框*/
  }
.round2{
  margin:0 3px;
  border:1px solid #ff2000;
  }
.round3{
  margin:0 2px;
  border:1px solid #ff2000;}
.round4{   
  margin:0 1px;
  border:1px solid #ff2000;}
.round5{
  margin:0 1px;
  border:1px solid #ff2000;
  }
.round1,.round2,.round3,.round4,.round5{
  border-top:none;
  border-bottom:none;
  }
.roundContent{
  border-left:1px solid #ff2000;
  border-right:1px solid #ff2000;/*左右边框*/
  background:#e7ff94;
  padding:10px;
  }
</style>
</HEAD>
<BODY>
<div>
  <b class="round">
      <b class="round1"></b>
      <b class="round2"></b>
      <b class="round3"></b>
      <b class="round4"></b>
      <b class="round5"></b>
  </b>
  <div class="roundContent">
 
    我是内容 <br />
    我是内容 <br />
    我是内容 <br />
    我是内容 <br />
  </div>
  <b class="round">
      <b class="round5"></b>
      <b class="round4"></b>
      <b class="round3"></b>
      <b class="round2"></b>
      <b class="round1"></b>
  </b>
好看的css代码
</div>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。