CSS

게시글 '이미지 없이 테두리 둥글게'에 대한 정보
이미지 없이 테두리 둥글게
등록일 2011-12-08 조회 3,996
첨부#1 round.html [용량:1.6KB]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
<head>
<title>스타일을 이용한 테두리 둥글게</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<style type="text/css">
body{font:normal 12px/1.4em; "Malgun Gothic";}
h1{padding:0 10px; font-size:15px;}
p{padding:0 10px;}
#round{background:#eee;}
#round span.rtop, #round span.rbottom{display:block; background:#fff;}
#round span.rtop span, #round span.rbottom span{display:block; height:1px; overflow:hidden; background:#eee;}
#round span.rtop span.r4, #round span.rbottom span.r4{margin:0 1px; height:2px;}
#round span.r1{margin:0 5px}
#round span.r2{margin:0 3px}
#round span.r3{margin:0 2px}
</style>
</head>
<body>
<div id="round">
 <span class="rtop"><span class="r1"></span><span class="r2"></span><span class="r3"></span><span class="r4"></span></span>
  <h1>이미지 없이 테두리 둥글게</h1>
  <p>1. 스타일만을 이용한 테두리를 만들었습니다.</p>
  <p>2. 스타일만을 이용한 테두리를 만들었습니다.</p>
  <p>3. 스타일만을 이용한 테두리를 만들었습니다.</p>
  <p>4. 스타일만을 이용한 테두리를 만들었습니다.</p>
  <p>5. 스타일만을 이용한 테두리를 만들었습니다.</p>
  <p>6. 스타일만을 이용한 테두리를 만들었습니다.</p>
 <span class="rbottom"><span class="r4"></span><span class="r3"></span><span class="r2"></span><span class="r1"></span></span>
</div>
</body>
</html>