CSS에서 테두리 둥근 모서리를 설정하는 방법-CSS 튜토리얼-php.cn

CSS에서 테두리 둥근 모서리를 설정하는 방법

青灯夜游

풀어 주다： 2021-10-12 14:57:59

원래의

25914명이 탐색했습니다.

CSS에서는 border-radius 속성을 사용하여 테두리 둥근 모서리를 설정할 수 있습니다. 이 속성의 기능은 테두리에 둥근 모서리 효과를 추가하는 것입니다. "border-radius: 둥근 모서리 반경"만 추가하면 됩니다. value;" 스타일을 요소에 적용합니다. 네 개의 테두리의 둥근 모서리를 동시에 설정합니다.

CSS에서 테두리 둥근 모서리를 설정하는 방법

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

CSS에서 테두리 둥근 모서리를 설정하는 가장 일반적이고 간단한 방법은 border-radius 속성을 사용하는 것입니다.

CSS border-radius 속성은 요소의 모서리 반경을 정의합니다. CSS border-radius 속성을 통해 모든 요소의 "둥근 모서리" 스타일을 얻을 수 있습니다.

구문: 

border-radius: none　｜　length{1,4} [/ length{1,4}

로그인 후 복사

각 값은 숫자 값 또는 백분율 형식일 수 있습니다.

length/length 첫 번째 길이는 수평 방향의 반경을 나타내고, 두 번째 길이는 수직 방향의 반경을 나타냅니다.

값이라면 왼쪽 위, 오른쪽 위, 오른쪽 아래, 왼쪽 아래의 네 가지 값이 동일합니다.

두 개의 값이 있는 경우 왼쪽 상단과 오른쪽 하단이 동일하여 첫 번째 값이고, 오른쪽 상단과 왼쪽 하단이 동일하여 두 번째 값입니다.
CSS에서 테두리 둥근 모서리를 설정하는 방법
값이 3개인 경우 첫 번째 값은 왼쪽 위를 설정하고, 두 번째 값은 오른쪽 위와 왼쪽 아래를 동일하게 하며, 세 번째 값은 오른쪽 아래를 설정합니다.

값이 4개 있는 경우 첫 번째 값은 왼쪽 위, 두 번째 값은 오른쪽 위, 세 번째 값은 오른쪽 아래, 네 번째 값은 왼쪽 아래로 설정됩니다.
CSS에서 테두리 둥근 모서리를 설정하는 방법

위의 약어 외에도 다음과 같이 네 모서리를 테두리처럼 별도로 작성할 수도 있습니다.

border-top-left-radius: //左上角 
border-top-right-radius: //右上角 
border-bottom-right-radius: //右下角 
border-bottom-left-radius: //左下角

로그인 후 복사

는 각각 가로 및 세로 반경입니다. 두 번째 값을 생략하면 가로 및 세로 반경이 동일합니다.
border-radius는 다음 버전의 브라우저에서만 사용할 수 있습니다: Firefox4.0+, Safari5.0+, Google Chrome 10.0+, Opera 10.5+, IE9+ 이전 브라우저의 경우 border-radius 표준 구문 형식이 지원됩니다. -radius 다른 브라우저 커널에 따라 다른 접두사를 추가해야 합니다. 예를 들어 Mozilla 커널은 "-moz"를 추가해야 하고 Webkit 커널은 "-webkit"을 추가해야 합니다. 그러나 IE와 Opera에는 없습니다. private 형식이므로 호환성을 최대화하기 위해 브라우저의 경우 다음과 같이 설정해야 합니다.

-webkit-border-radius: 10px 20px 30px; 
-moz-border-radius: 10px 20px 30px; 
border-radius: 10px 20px 30px;

로그인 후 복사

브라우저 비공개 형식 다음에 표준 형식을 작성해 주세요.

효과를 보려면 몇 가지 예를 인용하세요.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Keywords" content="关键词一，关键词二">
<meta name="Description" content="网站描述内容">
<meta name="Author" content="刘艳">
<title></title>
<style>
img {
border-radius: 30px;
margin: 100px;
}
</style>
</head>
<body>
<img  src="../images/photo.jpg"    style="max-width:90%" alt="CSS에서 테두리 둥근 모서리를 설정하는 방법" >
</body>
</html>

로그인 후 복사

효과:

CSS에서 테두리 둥근 모서리를 설정하는 방법
네 모서리의 반경은 30px입니다.

표준 원과 타원을 다시 살펴보세요.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Keywords" content="关键词一，关键词二">
<meta name="Description" content="网站描述内容">
<meta name="Author" content="刘艳">
<title></title>
<style>
p {
display: inline-block;
border: 10px solid red;
}

.circle {
width: 50px;
height: 50px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}

.elipse {
width: 50px;
height: 100px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
</style>
</head>
<body>
<p></p>
<p></p>
</body>
</html>

로그인 후 복사

효과:
CSS에서 테두리 둥근 모서리를 설정하는 방법
먼저 첫 번째 p와 두 번째 p의 차이점은 주로 정사각형인지 직사각형인지에 있습니다. 캐러셀에 있을 때 원의 그림 대신에 원을 사용할 수 있습니다.

위는 모두 수평 및 수직 방향의 동일한 반경의 예입니다. 다음은 수평 및 수직 방향의 서로 다른 반경의 두 가지 예입니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Keywords" content="关键词一，关键词二">
<meta name="Description" content="网站描述内容">
<meta name="Author" content="刘艳">
<title></title>
<style>
p {
display: inline-block;
border: 10px solid red;
margin: 100px;
}

.p1 {
width: 200px;
height: 100px;
border-radius: 0px 50px 32px/28px 50px 70px;
}

.p2 {
width: 100px;
height: 200px;
border-radius: 26px 106px 162px 32px/28px 80px 178px 26px;
}

.p3 {
width: 100px;
height: 200px;
border-radius: 20px 50px/ 20px 50px;
}
</style>
</head>
<body>
<p></p>
<p></p>
<p></p>
</body>
</html>

로그인 후 복사

효과는 다음과 같습니다.

CSS에서 테두리 둥근 모서리를 설정하는 방법