圆角制作 CSS代码

2008-8-1 chenmo 网站建设

这个比上文要好理解点,呵呵。不一定非要用图片来设计

<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>

Powered by emlog 湘ICP备13007859号 空间由景安网络赞助