[css] css 둥근테두리만들기
페이지 정보
본문
<style type="text/css">
table.corner {
border-collapse:collapse;
background:#F9F9F9;
margin:0 0 10px 0;
}
.tl_gray{background: url(./img/tl.gif) no-repeat;width:5px;height:5px;}
.tr_gray{background: url(./img/tr.gif) no-repeat;width:5px;height:5px;}
.bl_gray{background: url(./img/bl.gif) no-repeat;width:5px;height:5px;}
.br_gray{background: url(./img/br.gif) no-repeat;width:5px;height:5px;}
</style>
<table width="100%" class="corner"><tbody>
<tr>
<td class="tl_gray"><br /></td>
<td><br /></td>
<td class="tr_gray"><br /></td></tr>
<tr>
<td><br /></td>
<td style="padding: 20px"> 내용
</td>
<td><br /></td></tr>
<tr>
<td class="bl_gray"><br /></td>
<td><br /></td>
<td class="br_gray"><br /></td></tr></tbody></table>
이미지는 가로세로10px원을 그린후 열십자 조각으로 사용한다.
table.corner {
border-collapse:collapse;
background:#F9F9F9;
margin:0 0 10px 0;
}
.tl_gray{background: url(./img/tl.gif) no-repeat;width:5px;height:5px;}
.tr_gray{background: url(./img/tr.gif) no-repeat;width:5px;height:5px;}
.bl_gray{background: url(./img/bl.gif) no-repeat;width:5px;height:5px;}
.br_gray{background: url(./img/br.gif) no-repeat;width:5px;height:5px;}
</style>
<table width="100%" class="corner"><tbody>
<tr>
<td class="tl_gray"><br /></td>
<td><br /></td>
<td class="tr_gray"><br /></td></tr>
<tr>
<td><br /></td>
<td style="padding: 20px"> 내용
</td>
<td><br /></td></tr>
<tr>
<td class="bl_gray"><br /></td>
<td><br /></td>
<td class="br_gray"><br /></td></tr></tbody></table>
이미지는 가로세로10px원을 그린후 열십자 조각으로 사용한다.
추천0
댓글목록
등록된 댓글이 없습니다.