CSS3 둥근 모서리
CSS3의와 border-radius 특성, 당신은 어떤 요소를 "둥근 모서리"를 제공 할 수 있습니다.
브라우저 지원
테이블의 숫자는 완전히 속성을 지원하는 최초의 브라우저 버전을 지정합니다.
숫자는 다음 -webkit- 또는 -moz- 접두사와 함께 일 첫 번째 버전을 지정합니다.
| 재산 | |||||
|---|---|---|---|---|---|
| border-radius | 5.0 4.0 -webkit- |
9.0 | 4.0 3.0 -moz- |
5.0 3.1 -webkit- |
10.5 |
CSS3 border-radius 부동산
CSS3를 사용하면 사용하여 모든 요소를 "둥근 모서리"를 제공 할 수 있습니다 border-radius 속성을.
여기에 세 가지 예는 다음과 같습니다
지정된 배경 색상 요소 1. 둥근 모서리 :
둥근 모서리!
테두리와 요소 2. 둥근 모서리 :
둥근 모서리!
배경 이미지 요소 3. 둥근 모서리 :
둥근 모서리!
여기에 코드입니다 :
예
#rcorners1 {
border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners2 {
border-radius: 25px;
border: 2px solid #73AD21;
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;
} »그것을 자신을 시도  | 팁 : border-radius 속성은 실제로위한 약식 속성이다 border-top-left-radius , border-top-right-radius , border-bottom-right-radius 과 border-bottom-left-radius 특성. |
|---|
CSS3의 border-radius - 각 코너를 지정
당신이에 대해 하나의 값을 지정하면 border-radius 속성이 반경은 4 모서리에 적용됩니다.
당신이 원하는 경우에는 별도로 각 모서리를 지정할 수 있습니다. 여기 규칙은 다음과 같습니다
- 네 개의 값 : 첫 번째 값이 두 번째 값은 오른쪽 상단에 적용 왼쪽 상단에 적용, 세 번째 값은 오른쪽 하단에 적용 및 네 번째 값은 왼쪽 하단에 적용
- 세 가지 값 : 첫 번째 값이 두 번째 값은 오른쪽 상단과 왼쪽 하단에 적용 왼쪽 상단에 적용하고, 세 번째 값은 오른쪽 하단에 적용
- 두 값 : 첫 번째 값은 왼쪽 상단과 오른쪽 하단에 적용, 두 번째 값은 오른쪽 상단과 왼쪽 하단에 적용
- 하나의 값 : 네 모서리 동일하게 반올림됩니다
여기에 세 가지 예는 다음과 같습니다
1. 네 개의 값 - border-radius: 15px 50px 30px 5px :
2. 세 값 - border-radius: 15px 50px 30px :
3. 두 값 - border-radius: 15px 50px :
여기에 코드입니다 :
예
#rcorners4 {
border-radius: 15px 50px 30px 5px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners5 {
border-radius: 15px 50px 30px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners6 {
border-radius: 15px 50px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
} »그것을 자신을 시도 또한 타원형 모서리를 만들 수 있습니다 :
예
#rcorners7 {
border-radius: 50px/15px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners8 {
border-radius: 15px/50px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners9 {
border-radius: 50%;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
} »그것을 자신을 시도 연습으로 자신을 테스트!
CSS3 둥근 모서리 등록
| 재산 | 기술 |
|---|---|
| border-radius | * - - * - 반경 속성을 모두 네 경계를 설정하기위한 약식 속성 |
| border-top-left-radius | 왼쪽 상단의 테두리의 모양을 정의 |
| border-top-right-radius | 오른쪽 상단의 테두리의 모양을 정의 |
| border-bottom-right-radius | 오른쪽 하단의 테두리의 모양을 정의 |
| border-bottom-left-radius | 왼쪽 하단의 테두리의 모양을 정의 |