1 border-radius 속성
border-radius 를 적용하기전의 기본 html입니다<!DOCTYPE html>
<html>
<head>
<title>CSS3 border-radius</title>
<style>
body {
font-family: Verdana, Geneva, Tahoma, Arial, Helvetica, sans-serif;
font-size: 1em;
}
p {margin:0 auto; margin-top:20px;}
#rcorners1 {
padding: 20px;
width: 200px;
height: 150px;
background: #8ac007;
}
#rcorners2 {
padding: 20px;
width: 200px;
height: 150px;
border: 2px solid #8ac007;
}
</style>
</head>
<body>
<p id="rcorners1">Rounded corners1!</p>
<p id="rcorners2">Rounded corners2!</p>
</body>
</html>
실행화면 
스타일에 border-radius를 적용해보겠습니다
<!DOCTYPE html>
<html>
<head>
<title>CSS3 border-radius</title>
<style>
body {
font-family: Verdana, Geneva, Tahoma, Arial, Helvetica, sans-serif;
font-size: 1em;
}
p {margin:0 auto; margin-top:20px;}
#rcorners1 {
padding: 20px;
width: 200px;
height: 150px;
background: #8ac007;
border-radius: 25px;
}
#rcorners2 {
padding: 20px;
width: 200px;
height: 150px;
border: 2px solid #8ac007;
border-radius: 25px;
}
</style>
</head>
<body>
<p id="rcorners1">Rounded corners1!</p>
<p id="rcorners2">Rounded corners2!</p>
</body>
</html>
실행화면
2 모서리 위치 지정
border-radius 속성의 값에 대해 하나의 속성값을 지정하는 경우, 4 모서리에 적용됩니다. 별도로 각 모서리를 지정할 수 있습니다. 규칙은 다음과 같습니다.<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3 border-radius</title>
<style>
body {
font-family: Verdana, Geneva, Tahoma, Arial, Helvetica, sans-serif;
font-size: 0.9em;
}
#rcorners4 {
float:left;
margin-right:15px;
padding: 20px;
width: 150px;
height: 110px;
background: #8ac007;
border-radius: 15px 50px 30px 5px;
}
#rcorners5 {
float:left;
margin-right:15px;
padding: 20px;
width:150px;
height: 150px;
background: #8ac007;
border-radius: 15px 50px 30px;
}
#rcorners6 {
float:left;
margin-right:15px;
padding: 20px;
width: 150px;
height: 150px;
background: #8ac007;
border-radius: 15px 50px;
}
#rcorners7 {
float:left;
margin-right:15px;
padding: 20px;
width: 150px;
height: 150px;
background: #8ac007;
border-radius: 50px/15px;
}
#rcorners8 {
float:left;
margin-right:15px;
padding: 20px;
width: 150px;
height: 150px;
background: #8ac007;
border-radius: 15px/50px;
}
#rcorners9 {
float:left;
margin-right:15px;
padding: 20px;
width: 150px;
height: 150px;
background: #8ac007;
border-radius: 50%;
}
</style>
</head>
<body>
<p>Four values - border-radius: 15px 50px 30px 5px:</p>
<p id="rcorners4"></p>
<p>Three values - border-radius: 15px 50px 30px:</p>
<p id="rcorners5"></p>
<p>Two values - border-radius: 15px 50px:</p>
<p id="rcorners6"></p>
<p>Elliptical border - border-radius: 50px/15px:</p>
<p id="rcorners7"></p>
<p>Elliptical border - border-radius: 15px/50px:</p>
<p id="rcorners8"></p>
<p>Ellipse border - border-radius: 50%:</p>
<p id="rcorners9"></p>
</body>
</html>
실행화면
'웹코딩 > HTML5 CSS3' 카테고리의 다른 글
| HTM5에 새로 추가된 주요 태그들 (0) | 2016.10.12 |
|---|---|
| HTML5의 시멘틱 태그 (0) | 2016.10.12 |
| HTML5의 새 요소 (0) | 2016.10.12 |
| 텍스트 에디터 (0) | 2016.09.16 |
| 하위 브라우저에서 HTML5 표현되게 하기 (0) | 2016.06.22 |
