2009년 7월 29일 수요일

모서리가 둥근 박스 (CSS)

.rtop, .rbottom{display:block; background: #FFFFFF;}
.rtop *, .rbottom *{display: block; height: 1px; overflow: hidden; }

.r { text-align: center; width:80px; font: bold 12px; color: #000000 }
.r1 { margin: 0 5px; background: #DEDEDE; height: 1px; }
.r2 { margin: 0 3px; border: solid #DEDEDE; border-width: 0 2px; }
.r3 { margin: 0 2px; border: solid #DEDEDE; border-width: 0 1px; }
.r4 { margin: 0 1px; border: solid #DEDEDE; border-width: 0 1px;  height: 2px}
.rc { border: solid #DEDEDE; border-width: 0 1px; }


<div class="r">

<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b>

<b class="r4"></b></b>

<div class="rc">
<a href='<? echo "$g_dir/index.php" ?>' target="_blank">상점가기</a>
</div>

<b class="rbottom"><b class="r4"></b><b class="r3"></b> <b class="r2"></b>

<b class="r1"></b></b></div>

댓글 없음:

댓글 쓰기