WEB_TECH/CSS3
css3 모서리가 둥근 사각형 만들기
지식사랑
2013. 6. 19. 11:39
사각형의 모서리를 둥글게 하려면 예전에는 이미지 파일을 사용하였으마 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>
코드를 실행하면 이런 결과가 나옵니다.
