border-radius 속성을 사용하는 방법-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

border-radius 속성을 사용하는 방법

不言

Feb 14, 2019 pm 05:51 PM

border-radius

border-radius 속성을 사용하는 방법: 먼저 HTML 샘플 파일을 만든 다음 본문에 div를 만들고 마지막으로 div 스타일을 "border-radius:45px;"로 설정합니다.

border-radius 속성을 사용하는 방법

이 튜토리얼의 운영 환경: Windows 7 시스템, HTML5&&CSS3 버전, Dell G3 컴퓨터.

border-radius 속성은 테두리의 둥근 모서리를 설정하는 데 사용할 수 있는 테두리 속성입니다. 그렇다면 border-radius 속성의 구체적인 용도는 무엇인가요? 이 기사에서는 border-radius 속성의 구체적인 사용법을 소개합니다. 아래의 구체적인 내용을 살펴보겠습니다.

보통 border-radius 속성을 살펴보면 다음과 같은 구문을 볼 수 있습니다.

　border-radius: 1-4 length|% / 1-4 length|%;

로그인 후 복사

사실 이것이 border-radius를 쓰는 완전한 방법입니다. 일반적으로 border -radius:20px;로 작성합니다. 완전한 작성 방법은 다음과 같습니다: border-radius: 20px 20px 20px 20px / 20px 20px 20px 20px; 여기서 처음 4개의 20px는 수평 반경을 나타내고 마지막 4개의 값은 수직 반경을 나타내며, 그냥 설정했습니다. 타원이나 원을 그리려면 수평 반경과 수직 반경을 사용하고, 다른 곡선 모양도 그릴 수 있습니다.

다음으로 border-radius 속성

의 사용법을 자세히 살펴보겠습니다. 둥근 테두리 또는 원

둥근 테두리

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		#test {
    border: 3px solid lightblue;
    height: 200px;
    width: 300px;
    border-radius: 45px;
}
	</style>
</head>
<body>
<div id="test"></div>
</body>
</html>

로그인 후 복사

를 설정할 수 있습니다. 다음과 같습니다

border-radius 속성을 사용하는 방법

원형

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		#test {
    border: 3px solid lightblue;
    height: 100px;
    width: 100px;
    border-radius: 54px;
}
	</style>
</head>
<body>
<div id="test"></div>
</body>
</html>

로그인 후 복사

효과는 다음과 같습니다

border-radius 속성을 사용하는 방법

라디안으로 다른 그래픽을 설정할 수 있습니다

코드는 다음과 같습니다

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
#test {
	height: 100px;
    width: 200px;
    border: 3px solid pink;
    border-radius: 60px 5px;
}
	</style>
</head>
<body>
<div id="test"></div>
</body>
</html>

로그인 후 복사

효과는 다음과 같습니다

border-radius 속성을 사용하는 방법