这个比上文要好理解点，呵呵。不一定非要用图片来设计
<html>
<head>
<style>
/*css document*/
body{font-size:12px;}
.width{width:500px;}/*修改宽，自适应宽可以设置成100%*/
.cr1,.cr2, .cr3,.cr4,.cr5{ height:1px; background:#c3d9ff;overflow:hidden;}/*background调整颜色*/
.cr1{margin:0 6px;}
.cr2{margin:0 5px;}
.cr3{margin:0 4px;}
.cr4{margin:0 3px;}
.cr5{margin:0 3px;; height:20px; line-height:20px;padding:0 10px;}/*修改高*/
</style>
</head>
<body>
<div class="width">
<div class="cr1"></div>
<div class="cr2"></div>
<div class="cr3"></div>
<div class="cr4"></div>
<div class="cr5">内容部分</div><!--圆角里的内容-->
<div class="cr4"></div>
<div class="cr3"></div>
<div class="cr2"></div>
<div class="cr1"></div>
</div>
</body>
</html>
评论 (0)