border-radius는 "테두리 둥근 모서리, 둥근 모서리 반경"을 의미하며 요소 테두리에 대한 (1~4) 둥근 모서리 효과를 만드는 데 사용됩니다. 기본 구문은 "border-radius: 1-4 길이|%", 방향을 왼쪽 위 모서리, 오른쪽 위 모서리, 오른쪽 아래 모서리, 왼쪽 아래 모서리로 설정합니다.
이 튜토리얼의 운영 환경: windows7 시스템, css3&&html5 버전, Dell G3 컴퓨터.
튜토리얼 추천: css 비디오 튜토리얼
border-radius
border-radius는 CSS3의 단축 속성으로, 테두리에 대한 (1~4) 둥근 모서리 효과를 만드는 데 사용됩니다.
구문:
border-radius: 1-4 length|%
값:
length 곡선의 모양을 정의합니다.
% %를 사용하여 모서리의 모양을 정의합니다.
참고: 각 반경의 4개 값 순서는 왼쪽 위 모서리, 오른쪽 위 모서리, 오른쪽 아래 모서리, 왼쪽 아래 모서리입니다. 왼쪽 아래 모서리를 생략하면 오른쪽 위 모서리도 동일합니다. 오른쪽 아래 모서리를 생략하면 왼쪽 위 모서리도 동일합니다. 오른쪽 상단 모서리를 생략하면 왼쪽 상단 모서리도 동일합니다.
4개 값: 첫 번째 값은 왼쪽 위 모서리, 두 번째 값은 오른쪽 위 모서리, 세 번째 값은 오른쪽 아래 모서리, 네 번째 값은 왼쪽 아래 모서리입니다.
세 가지 값: 첫 번째 값은 왼쪽 위 모서리, 두 번째 값은 오른쪽 위 모서리 및 왼쪽 아래 모서리, 세 번째 값은 오른쪽 아래 모서리입니다.
두 값: 첫 번째 값은 왼쪽 상단 및 오른쪽 하단, 두 번째 값은 오른쪽 상단 및 왼쪽 하단
값 1개: 둥근 모서리 4개가 동일한 값을 갖습니다
예:
1. - 테두리 반경: 15px 50px 30px 5pxborder-radius: 15px 50px 30px 5px
2. 三个值 - border-radius: 15px 50px 30px
3. 两个值 - border-radius: 15px 50px
border-radius: 15px 50px 30px
3. 두 가지 값 - border-radius: 15px 50px
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#rcorners7 {
border-radius: 50px/15px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners8 {
border-radius: 15px/50px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners9 {
border-radius: 50%;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<p>椭圆边框 - border-radius: 50px/15px:</p>
<p id="rcorners7"></p>
<p> 椭圆边框 - border-radius: 15px/50px:</p>
<p id="rcorners8"></p>
<p>椭圆边框 - border-radius: 50%:</p>
<p id="rcorners9"></p>
</body>
</html>위 내용은 국경 반경은 무엇을 의미합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
