*{ /* 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 (網頁設計知識庫)
沒有留言:
張貼留言
你好!歡迎你在我的 Blog 上留下你寶貴的意見。