CSS圆角

介于纯粹CSS的无图片圆角实在是代码太乱，还是倾向于利用图片结合CSS来自做圆角；

 

 

 

（1）高宽皆自适应：

 

.roundedcornr_box_510746 {
   background: #dddddd url(roundedcornr_510746_grad.gif) repeat top left;width:300px;
}
.roundedcornr_top_510746 div {
   background:transparent url(roundedcornr_510746_tl.gif) no-repeat top left;
}
.roundedcornr_top_510746 {
   background:transparent url(roundedcornr_510746_tr.gif) no-repeat top right;
}
.roundedcornr_bottom_510746 div {
   background:transparent url(roundedcornr_510746_bl.gif) no-repeat bottom left;
}
.roundedcornr_bottom_510746 {
   background:transparent url(roundedcornr_510746_br.gif) no-repeat bottom right;
}

.roundedcornr_top_510746 div, .roundedcornr_top_510746,
.roundedcornr_bottom_510746 div, .roundedcornr_bottom_510746 {
   width: 100%;
   height: 30px;
   font-size: 1px;
}
.roundedcornr_content_510746 { margin: 0 30px; }
-->
</style>
<div class="roundedcornr_box_510746">
   <div class="roundedcornr_top_510746"><div></div></div>
      <div class="roundedcornr_content_510746">
      <h1>hello world</h1>
         Lorem ipsum dolor sit amet, consectetur
         adipisicing elit, sed do eiusmod tempor incididunt
         ut labore et dolore magna aliqua. Ut enim ad minim
         veniam, quis nostrud exercitation ullamco laboris
         nisi ut aliquip ex ea commodo consequat. Duis aute
         irure dolor in reprehenderit in voluptate velit esse
         cillum dolore eu fugiat nulla pariatur. Excepteur
         sint occaecat cupidatat non proident, sunt in culpa
         qui officia deserunt mollit anim id est laborum.
    adipisicing elit, sed do eiusmod tempor incididunt
         ut labore et dolore magna aliqua. Ut enim ad minim
         veniam, quis nostrud exercitation ullamco laboris
         nisi ut aliquip ex ea commodo consequat. Duis aute
         irure dolor in reprehenderit in voluptate velit esse
         cillum dolore eu fugiat nulla pariatur. Excepteur
         sint occaecat cupidatat non proident, sunt in culpa
         qui officia deserunt mollit anim id est laborum.
    adipisicing elit, sed do eiusmod tempor incididunt
         ut labore et dolore magna aliqua. Ut enim ad minim
         veniam, quis nostrud exercitation ullamco laboris
         nisi ut aliquip ex ea commodo consequat. Duis aute
         irure dolor in reprehenderit in voluptate velit esse
         cillum dolore eu fugiat nulla pariatur. Excepteur
         sint occaecat cupidatat non proident, sunt in culpa
         qui officia deserunt mollit anim id est laborum. adipisicing elit, sed do eiusmod tempor incididunt
         ut labore et dolore magna aliqua. Ut enim ad minim
         veniam, quis nostrud exercitation ullamco laboris
         nisi ut aliquip ex ea commodo consequat. Duis aute
         irure dolor in reprehenderit in voluptate velit esse
         cillum dolore eu fugiat nulla pariatur. Excepteur
         sint occaecat cupidatat non proident, sunt in culpa
         qui officia deserunt mollit anim id est laborum.
      </div>
   <div class="roundedcornr_bottom_510746"><div></div></div>
</div>

 

利用九宫格的方式将四个圆角图片固定在了四个角上；

 

图片如下：

 

 

如果只要求高度自适应的话，则更简单：

 

.roundedcornr_box_510746 {
 width:611px;
}
.roundedcornr_content_510746 {
   background: #dddddd url(b.gif) repeat-y top left;width:100%;width:100%;
}
.roundedcornr_top_510746 {
   background: transparent url(c.gif) no-repeat top left;height:14px;width:100%;
}

.roundedcornr_bottom_510746 {
   background:transparent url(a.gif) no-repeat top left;height:14px;width:100%;
}

-->
</style>
<div class="roundedcornr_box_510746">
   <div class="roundedcornr_top_510746"></div>
      <div class="roundedcornr_content_510746">
   <h1>hello world</h1>
         Lorem ipsum dolor sit amet, consectetur
         adipisicing elit, sed do eiusmod tempor incididunt
         ut labore et dolore magna aliqua. Ut enim ad minim
         veniam, quis nostrud exercitation ullamco laboris
         nisi ut aliquip ex ea commodo consequat. Duis aute
         irure dolor in reprehenderit in voluptate velit esse
         cillum dolore eu fugiat nulla pariatur. Excepteur
         sint occaecat cupidatat non proident, sunt in culpa
         qui officia deserunt mollit anim id est laborum.
    adipisicing elit, sed do eiusmod tempor incididunt
         ut labore et dolore magna aliqua. Ut enim ad minim
         veniam, quis nostrud exercitation ullamco laboris
         nisi ut aliquip ex ea commodo consequat. Duis aute
         irure dolor in reprehenderit in voluptate velit esse
         cillum dolore eu fugiat nulla pariatur. Excepteur
         sint occaecat cupidatat non proident, sunt in culpa
         qui officia deserunt mollit anim id est laborum.
    adipisicing elit, sed do eiusmod tempor incididunt
         ut labore et dolore magna aliqua. Ut enim ad minim
         veniam, quis nostrud exercitation ullamco laboris
         nisi ut aliquip ex ea commodo consequat. Duis aute
         irure dolor in reprehenderit in voluptate velit esse
         cillum dolore eu fugiat nulla pariatur. Excepteur
         sint occaecat cupidatat non proident, sunt in culpa
         qui officia deserunt mollit anim id est laborum. adipisicing elit, sed do eiusmod tempor incididunt
         ut labore et dolore magna aliqua. Ut enim ad minim
         veniam, quis nostrud exercitation ullamco laboris
         nisi ut aliquip ex ea commodo consequat. Duis aute
         irure dolor in reprehenderit in voluptate velit esse
         cillum dolore eu fugiat nulla pariatur. Excepteur
         sint occaecat cupidatat non proident, sunt in culpa
         qui officia deserunt mollit anim id est laborum.
      </div>
   <div class="roundedcornr_bottom_510746"></div>
</div>

 

图片如下：