CSS3는 (경계 반경) 둥근 모서리

값 : 반지름의 길이

접두사

• -moz 파이어 폭스 (예컨대 -moz-경계 반경)
• -webkit (예를 들어 : -webkit-border-radius는) 사파리와 크롬.

예 1

<div ID = "라운드"> </ div> 
#round { 
    패딩 : 10px; 폭 : 300 픽셀; 높이 : 50 픽셀; 
    경계 : 5px 고체 #dedede; 
    -moz-경계 반경 : 15 픽셀; / * Gecko 브라우저 * / 
    -webkit 국경 반경 : 15 픽셀; / * 웹킷 브라우저 * / 
    국경 반경 : 15 픽셀; / * W3C 구문 * / 
}

효과 :

예 2 : 테두리

<div ID = "라운드"> </ div>   
#round { 
    패딩 : 10px; 폭 : 300 픽셀; 높이 : 50 픽셀; 
    배경 : #의 FC9; 
    -moz-경계 반경 : 15 픽셀; 
    -webkit-경계 반경 : 15 픽셀; 
    경계 반경 : 15 픽셀; 
}

효과 :

작성 순서

/ * Gecko 브라우저 * / 
-moz 국경 반경 : 5px; 
/ * 웹킷 브라우저 * / 
-webkit 국경 반경 : 5px; 
- / * W3C 구문 때문에 미래 교정 * / 사용 표준이 될 가능성이 
국경 반경 : 10px;

다른

지원에, 오른쪽, 아래, 왼쪽

국경 반경 : 5px 15 픽셀 20 픽셀 x 25 픽셀;

지원 분할 작성

/ * Gecko 브라우저 * / 
-moz-border-radius는-좌상 : 20 픽셀; 
-moz-경계 반경 topright : 0; 
-moz-경계 반경 bottomleft : 0; 
-moz-경계 반경 bottomright : 20 픽셀; 
 
/ * * 웹킷 브라우저 / 
-webkit-보더 좌상 반경 : 20 픽셀; 
-webkit-보더 오른쪽 상단 반경 : 0; 
-webkit-보더 좌하 반경 : 0; 
-webkit-보더 우하 반경 : 20 픽셀; 
 
/ * * 구문 W3C / 
보더 좌상 반경 : 20 픽셀; 
국경 - 오른쪽 상단 반경 : 0; 
보더 우하 반경 : 0; 
보더 좌하 반경 : 20 픽셀;

지원

브라우저	지원
파이어 폭스 (2,3+)	√
구글 크롬 (1.0.154 + ...)	√
구글 크롬 (2.0.156 + ...)	√
사파리 (3.2.1+ 창)	√
인터넷 익스플로러 (IE7, IE8)	×
오페라 9.6	×

HTTPS : //www.cnblogs.com/Alenliu/p/4971422.html 재현