CSS에서 테두리 둥근 모서리를 설정하는 방법
- 青灯夜游원래의
- 2021-10-11 17:49:5625896검색
CSS에서는 border-radius 속성을 사용하여 테두리 둥근 모서리를 설정할 수 있습니다. 이 속성의 기능은 테두리에 둥근 모서리 효과를 추가하는 것입니다. "border-radius: 둥근 모서리 반경"만 추가하면 됩니다. value;" 스타일을 요소에 적용합니다. 네 개의 테두리의 둥근 모서리를 동시에 설정합니다.
이 튜토리얼의 운영 환경: 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 첫 번째 길이는 수평 방향의 반경을 나타내고, 두 번째 길이는 수직 방향의 반경을 나타냅니다.
값이라면 왼쪽 위, 오른쪽 위, 오른쪽 아래, 왼쪽 아래의 네 가지 값이 동일합니다.
두 개의 값이 있는 경우 왼쪽 상단과 오른쪽 하단이 동일하여 첫 번째 값이고, 오른쪽 상단과 왼쪽 하단이 동일하여 두 번째 값입니다. 
값이 3개인 경우 첫 번째 값은 왼쪽 위를 설정하고, 두 번째 값은 오른쪽 위와 왼쪽 아래를 동일하게 하며, 세 번째 값은 오른쪽 아래를 설정합니다. 
값이 4개 있는 경우 첫 번째 값은 왼쪽 위, 두 번째 값은 오른쪽 위, 세 번째 값은 오른쪽 아래, 네 번째 값은 왼쪽 아래로 설정됩니다. 
위의 약어 외에도 다음과 같이 네 모서리를 테두리처럼 별도로 작성할 수도 있습니다.
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>효과:
네 모서리의 반경은 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>효과: 
먼저 첫 번째 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 동영상 튜토리얼)
위 내용은 CSS에서 테두리 둥근 모서리를 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!