이미지 없이 css를 이용해서 div 테두리를 동그랗게 할 수 없을까요?
방법이 있습니다.
border-radius.htc 파일을 이용하여 아래와 같이 결과물을 볼 수 있습니다.
관련 자료는 첨부파일에 있습니다.
 |
| <예제> |
html 소스
<html>
<head>
<title>레이어(div) 외곽을 둥글게 하기 - css and div : rounded corner</title>
<style>
fieldset { padding:10px; }
.test-border { behavior: url('border-radius.htc'); -moz-border-radius: 20px; width: 200px; height: 200px; background: #323232; border: 2px solid #ffd800 }
.test-border2 { behavior: url('border-radius.htc'); -moz-border-radius: 20px; width: 200px; height: 200px; background: #ffffff; border: 2px solid #ff6a00; }
</style>
</head>
<body>
<fieldset>
<legend>1. 예제</legend>
<div class="test-border">
</div>
</fieldset>
<fieldset>
<legend>2. 예제</legend>
<div class="test-border2">
</div>
</fieldset>
</body>
</html>
<head>
<title>레이어(div) 외곽을 둥글게 하기 - css and div : rounded corner</title>
<style>
fieldset { padding:10px; }
.test-border { behavior: url('border-radius.htc'); -moz-border-radius: 20px; width: 200px; height: 200px; background: #323232; border: 2px solid #ffd800 }
.test-border2 { behavior: url('border-radius.htc'); -moz-border-radius: 20px; width: 200px; height: 200px; background: #ffffff; border: 2px solid #ff6a00; }
</style>
</head>
<body>
<fieldset>
<legend>1. 예제</legend>
<div class="test-border">
</div>
</fieldset>
<fieldset>
<legend>2. 예제</legend>
<div class="test-border2">
</div>
</fieldset>
</body>
</html>
👉📁예제파일 링크
댓글 없음:
댓글 쓰기