사각형의 모서리를 둥글게 하려면 예전에는 이미지 파일을 사용하였으마 CSS3에서 border-radius 속성값을 지정하는 것만으로도 구현할 수 잇게 되었습니다.
사용방법
-webkit-border-radius: 15px;
코드 예를 살펴보죠.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>border-radius</title>
<style type="text/css">
div{
text-align:center;
font-size:32px;
color:#FFFFFF;
padding:10px;
margin:10px;
-webkit-border-radius:15px;
}
.box1{ background-color:blue; }
.box2{ background-color:black; }
.box3{ background-color:red; }
</style>
</head>
<body>
<div class="box1"> 첫번째 박스 </div>
<div class="box2"> 두번째 박스 </div>
<div class="box3"> 세번째 박스 </div>
</body>
</html>
코드를 실행하면 이런 결과가 나옵니다.
'WEB_TECH > CSS3' 카테고리의 다른 글
| css3를 활용하여 모션주기. transition (0) | 2013.06.19 |
|---|---|
| css3 transform을 사용하여 모양 변형 시키기 (0) | 2013.06.19 |
| css3를 사용하여 box-shadow 그림자 구현하는 방법 (0) | 2013.06.19 |
| opacity 사용하는 방법 (0) | 2013.06.19 |
| font-face (0) | 2013.05.08 |
