CSS3의 둥근 모서리에 대한 관련 지식에 대한 자세한 설명-CSS 튜토리얼-php.cn

CSS3의 둥근 모서리에 대한 관련 지식에 대한 자세한 설명

零下一度

풀어 주다： 2017-05-15 11:28:10

원래의

1137명이 탐색했습니다.

CSS3 둥근 모서리

CSS3 border-radius 속성을 사용하면 모든 요소에 대해 "둥근 모서리"를 만들 수 있습니다.

브라우저 지원

표의 숫자 는 이 속성을 지원하는 첫 번째 브라우저의 버전 번호를 나타냅니다.

-webkit- 또는 -moz- 앞의 숫자는 해당 접두사를 지원하는 첫 번째 버전을 나타냅니다.

CSS3 border-radius 속성

CSS3 border-radius 속성을 사용하면 모든 요소에 대해 "둥근 모서리"를 만들 수 있습니다.

코드는 다음과 같습니다.

#rcorners1 {
    border-radius: 25px;
    background: #8AC007;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}
#rcorners2 {
    border-radius: 25px;
    border: 2px solid #8AC007;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}
#rcorners3 {
    border-radius: 25px;
    background: url(paper.gif);
    background-position: left top;
    background-repeat: repeat;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}

로그인 후 복사

CSS3 border-radius - 각 둥근 모서리를 지정

border-radius 속성에 하나의 값만 지정하면 4가 됩니다. 둥근 모서리가 생성되었습니다.

그러나 네 모서리를 하나씩 지정하려면 다음 규칙을 사용할 수 있습니다.

4개 값: 첫 번째 값은 왼쪽 위 모서리, 두 번째 값은 upper right Corner , 세 번째 값은 오른쪽 아래 모서리, 네 번째 값은 왼쪽 아래 모서리입니다.

세 가지 값: 첫 번째 값은 왼쪽 상단, 두 번째 값은 오른쪽 상단 및 왼쪽 하단, 세 번째 값은 오른쪽 하단

두 값: 첫 번째 값은 왼쪽 위 모서리와 오른쪽 아래 모서리이고, 두 번째 값은 오른쪽 위 모서리와 왼쪽 아래 모서리입니다

한 값: 둥근 네 모서리의 값은 동일합니다

다음은 소스 코드는 다음과 같습니다:

#rcorners4 {
    border-radius: 15px 50px 30px 5px;
    background: #8AC007;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}
#rcorners5 {
    border-radius: 15px 50px 30px;
    background: #8AC007;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}
#rcorners6 {
    border-radius: 15px 50px;
    background: #8AC007;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}

로그인 후 복사

타원형 모서리를 만들 수도 있습니다:

Instance

#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;
}

로그인 후 복사

[관련 권장 사항]

1. >특별 추천: "php Programmer Toolbox" V0.1 버전 다운로드

무료 CSS 온라인 동영상 튜토리얼

php.cn Dugu Jiujian (2) - CSS 동영상 튜토리얼

위 내용은 CSS3의 둥근 모서리에 대한 관련 지식에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!