고정 헤더 영역
상세 컨텐츠
본문
출처 : 따라하면서 배우는 HTML5+CSS3+jQuery+JavaScript 실무활용 14가지, 위키북스
radius단위로 px, % 모두 사용 가능
단, 여기서는 px 사용함으로써 도형의 크기를 고정한 채 진행함.
<!document html>
<html>
<head>
<meta charset="UTF-8">
<title>border-radius</title>
<style>
.cycle{
width:100px;
height:100px;
background-color:rgb(204, 204, 204);
}
</style>
</head>
<body>
<div class="cycle"></div>
</body>
</html>
border-radius:50px/50px; /* 수평:50px/수직:50px */가로, 세로 100px의 절반에 해당하는 50px을 넣었으므로 둥근 원이 나온다.
/ 를 기준으로 앞의 50px은 수평 부분의 곡선, 뒤의 50px은 수직 부분의 곡선을 의미한다.
/ 표시 없이 공백으로 값 구분 가능하다.
그럴 경우 앞의 50px은 top-left, bottom-right 의 수치가 되고, 뒤의 50px은 top-right, bottom-left의 수치가 된다.
border-radius:50px/30px; /* 수평:50px/수직:30px */수평은 100px의 절반에 해당하는 50px을 입력했으므로 둥글게 되지만, 수직은 30px만큼의 둥글기만 가지므로 다음과 같은 모양이 된다.
border-radius: 130px 40px; /* 수평:130px 수직:40px */대각선으로 같은 값이 들어가면서 타원이 만들어진다. (top-left, bottom-right : 130px, top-right, bottom-left : 40px)
border-top-right-radius: 50px 20px;수평 값 50px, 수직 값 20px 적용
이와 같이 원하는 모서리만 골라서 수평, 수직 값을 동시에 줄 수 있다. 더 섬세한 표현 가능
/*1*/ border-radius: 300px 0px 0px 0px;
/*2*/ border-radius: 50px 0;
/*3*/ border-radius: 0px 100px;
'CSS' 카테고리의 다른 글
| ul li 사용한 메뉴 바 만들기 (0) | 2023.03.08 |
|---|---|
| transform 2D 속성 (0) | 2023.03.05 |
| [CSS3] 그림자 배너 만들기 :: box-shadow 속성 (0) | 2023.03.05 |
| [CSS3]그림자 있는 배너 :: 도형 모서리 테두리 둥글게 만들기 (0) | 2023.03.05 |
| [CSS3]그림자 있는 배너 용어 정의 및 정리 (0) | 2023.03.05 |
댓글 영역