2010-05-22

CSS3 圓角

*{

/* Gecko browsers */
-moz-border-radius: 20px; /*all*/
-moz-border-radius: 20px 0; /*TL&BR, TR&BL*/
-moz-border-radius: 20px 0 20px; /*TL, TR&BL, BR*/
-moz-border-radius: 20px 0 20px 0; /*TL, TR, BR, BL*/
-moz-border-radius: 20px/ 10px; /*(X)/ (Y)*/
-moz-border-radius: 20px 0 20px 0/ 10px 0 10px 0; /*(X)TL, TR, BR, BL/ (Y)TL, TR, BR, BL*/

-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 0;
-moz-border-radius-bottomright: 20px;
-moz-border-radius-bottomleft: 0;


/* Webkit browsers */
-webkit-border-radius: 20px; /*all*/
-webkit-border-radius: 20px 0 20px 0; /*TL, TR, BR, BL*/

-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 0;
-webkit-border-bottom-right-radius: 20px;
-webkit-border-bottom-left-radius: 0;


/* Konqueror (KDE) */
-khtml-border-radius: 20px; /*all*/
-khtml-border-radius: 20px 0 20px 0; /*TL, TR, BR, BL*/

-khtml-border-top-left-radius: 20px;
-khtml-border-top-right-radius: 20px;
-khtml-border-bottom-left-radius: 20px;
-khtml-border-bottom-right-radius: 20px;


/* ??? browsers */
-goog-ms-border-radius: 20px; /*all*/
-goog-ms-border-radius: 20px 0 20px 0;/*TL, TR, BR, BL*/

-goog-ms-border-top-left-radius: 20px;
-goog-ms-border-top-right-radius: 0;
-goog-ms-border-bottom-right-radius: 20px;
-goog-ms-border-bottom-left-radius: 0;


/* W3C syntax */
border-radius: 20px; /*all*/
border-radius: 20px 0; /*TL&BR, TR&BL*/
border-radius: 20px 0 20px; /*TL, TR&BL, BR*/
border-radius: 20px 0 20px 0; /*TL, TR, BR, BL*/
border-radius: 20px/ 10px; /*(X)/ (Y)*/
border-radius: 20px 0 20px 0/ 10px 0 10px 0; /*(X)TL, TR, BR, BL/ (Y)TL, TR, BR, BL*/

border-top-left-radius: 20px;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius:  20px;

}


參考來源:
CSS Backgrounds and Borders Module Level 3
CSS Border Radius :: Richard A. Johnson
border-radius與圓角 - wowbox blog (網頁設計知識庫)

0 回應: