국경 반경은 무엇을 의미합니까?-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

국경 반경은 무엇을 의미합니까?

青灯夜游

Jan 06, 2021 pm 02:21 PM

border-radius

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

국경 반경은 무엇을 의미합니까? 2. 세 가지 값 - border-radius: 15px 50px 30px

국경 반경은 무엇을 의미합니까?

3. 두 가지 값 - border-radius: 15px 50px 국경 반경은 무엇을 의미합니까?

4. 타원 코너

<!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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.