dom 라운드 박스

원래 의도는 둥근박스를 위해서 의미 없는 불필요한 클래스를 여러개 지정해야 하는데...이를 자바로 따로 생성한다.

의도하고자하는 기본 html는 다음과 같고
 <div class="box">
 
  <div class="bt"><div></div>
  </div>
   <div class="i1">
     <div class="i2">
       <div class="i3">sdsasd</div></div></div>

  <div class="bb"><div></div>
  </div>
</div>

사용될 html은
<div class="box">
<div class="cbb">
</div>
</div>
준비할 이미지는 box.gif(이미지 에디터 에서 제작한 커다란  라운드 박스) borders.gif(양쪽 라인)이둘.

css는
.box {
margin: 15px 0 0 0;
padding: 5px 0 5px 0;
}
/* cbb 자바스크립트가 지원 안될때 */
.cbb {
margin: 0 10px 0 10px;
background: #FFF;
padding: 5px 0 5px 0;
line-height: 170%;
}

/* 메인박스 */
.cbb p, .cb p {
margin: 0;
padding: 0 5px 5px 50px;
color: #333;
}

/* Insert the custom corners and borders for browsers with sufficient JavaScript support */

.cb {
margin: 0.5em 0;
line-height: 170%;
    }

/* 상단 코너*/
.bt {
    background:url(box.png) no-repeat 100% 0 !important;
    background:url(box.gif) no-repeat 100% 0;
    margin:0 0 0 18px;
    height:27px;
    }
.bt div {
    height:27px;
    width:18px;
    position:relative;
    left:-18px;
    background:url(box.png) no-repeat 0 0 !important;
    background:url(box.gif) no-repeat 0 0;
    }

/* 하단코너*/
.bb {
    background:url(box.png) no-repeat 100% 100% !important;
    background:url(box.gif) no-repeat 100% 100%;
    margin:0 0 0 12px;
    height:14px;
    }
.bb div {
    height:14px;
    width:12px;
    position:relative;
    left:-12px;
    background:url(box.png) no-repeat 0 100% !important;
    background:url(box.gif) no-repeat 0 100%;
    }

/* 왼쪽 라인 */
.i1 {
    padding: 0 0 0 12px;
    background:url(borders.png) repeat-y 0 0 !important;
    background:url(borders.gif) repeat-y 0 0;
    }
/*오른쪽라인 */
.i2 {
    padding: 0 12px 0 0;
    background:url(borders.png) repeat-y 100% 0 !important;
    background:url(borders.gif) repeat-y 100% 0;
    }
/*내용*/
.i3 {
    background:#FFF;
border: 1px solid #FFF;
    border-width:1px 0;
    padding:0 5px;
    }