02. 보더레디어스
· 박스의 모서리를 둥글게 : 보더 레이어스
· text-transform 의 속성 두가지 : uppercase , capitalize
· div 박스의 origin(기준값) : 왼쪽 위
· border-radius 에 값을 두개만 주었을때 :
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>02.보더레디어스</title>
<style>
h2 { text-align:center; text-transform:capitalize; }
/* text-transform : uppercase : 소문자를 모두 대문자로 변경해줌 */
/* text-transform : capitalize : 첫글자만 대문자로 변경해줌*/
.wrap { position: absolute; left:50%; top: 100px;
/* position : 박스의 위치를 왼쪽에서 50%,
위에서 100px 아래의 위치로 지정한다. */
/* 박스의 origin(기준값)은 왼쪽위 이다. */
width: 500px; margin-left:-250px;
/* padding : 박스 바깥쪽 여백 */
background: gray; }
.corner1 { width: 200px; height: 200px; position: relative; left: 50%;
background: red; border-radius: 50px;}
/* border-radius : 박스의 모서리를 둥글게 처리한다. */
.corner2 { width: 200px; height: 200px; left: 50%;
background: orange;
border-radius: 40px 100px 40px 100px;}
/* 박스의 모서리마다 다른 크기로 둥글게 처리한다. */
/* 1값이 왼쪽 상단, 2값이 오른쪽 상단,
3값이 오른쪽 하단, 4값이 왼쪽 하단 */
.corner3 { width: 200px; height: 200px;left: 50%;
background: yellow;
border-radius: 130px 10px;}
/* 1값으로 왼쪽 상단 + 오른쪽 하단,
2값으로 오른쪽 상단 + 왼쪽 하단 의 모서리를 둥글게 처리 */
.corner4 { width: 200px; height: 200px; left: 50%;
background: green;
border-radius: 150px -30px;}
.corner5 { width: 200px; height: 200px; left: 50%;
background: blue; border-radius: 90px;}
</style>
</head>
<body>
<div class="wrap">
<!-- 부모 박스로 자식 박스를 감쌀 때 사용하는 이름이 wrap,container이다. -->
<h2>border-radius</h2>
<div class="corner1"></div>
<div class="corner2"></div>
<div class="corner3"></div>
<div class="corner4"></div>
<div class="corner5"></div>
</div>
</body>
</html>