CSS3中邊框相關的特性

作者: caixw 發布時間: 2010-09-05 13:16 閱讀: 1270 次推薦: 0 原文鏈接 [收藏]

1.圓角 border-radius

CSS2中的圓角只能通過比較特殊的方法或是圖片實現，在CSS3中終于可以直接使用了。指令為：

1 border-radius: width;

width表示四個圓角的水平半徑。目前這還只是個草案，并非實際標準，所以直接用border-radius瀏覽器還是不能識別的，對于這種實現各瀏覽器都會加上各自的標記，Firefox為-moz-border-radius，webkit內核的為-webkit-border-radius而IE8和Opera貌似還不支持這個屬性。
有時候指定某一個角為圓角也很有用，所以又有了以下四個類型（恩，這回moz和webkit命名有點不一樣）：

1 /* moz */
2 -moz-border-radius-topleft: /* 左上角 */
3 -moz-border-radius-bottomleft: /* 左下角 */
4 -moz-border-radius-topright: /* 右上角 */
5 -moz-border-radius-bottomright: /* 右下角 */
6
7 /* webkit */
8 -webkit-border-top-left-radius: /* 左上角 */
9 -webkit-border-bottom-left-radius: /* 左下角 */
10 -webkit-border-top-right-radius: /* 右上角 */
11 -webkit-border-bottom-right-radius: /* 右下角 */

示例：四個圓角。如果看到了圓角，說明你的瀏覽器支持這一特性。
border:5px solid gray;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
padding:10px;

示例：底部兩個圓角。如果看到了，說明你的瀏覽器支持這一特性。
border:5px solid gray;
-moz-border-radius-bottomleft:25px;
-moz-border-radius-bottomright:40px;
-webkit-border-bottom-left-radius:25px;
-webkit-border-bottom-right-radius:40px;
padding:10px;

示例：textarea或input的圓角在firefox中若要指定textarea或input的圓角，不能將border-style高為none。 border:5px solid gray; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; padding:10px;

2.邊框漸變：border-colors

這個可以用來指定邊框的漸變顏色，當你指定的邊框的值為5px時，那么你在這個border-color中指定5種顏色的話，每一種顏色就顯示為1px的寬度，若只指定了4種顏色，則最后指定的顏色將填充剩下的寬度。當然，相對應的也有相對于四條邊的語法。

1 border-colors: color1 color2...
2 border-top-colors:
3 border-right-color:
4 border-bottom-colors:
5 border-left-colors:

示例：左邊和頂部邊框漸變效果。
目前貌似只有Firefox3.5以上版本才實現此特性。
border: 10px solid #000;
-moz-border-left-colors:#000 #111 #222 #333 #444 #555 #666 #777 #888 #999;
-moz-border-top-colors:#fff #eee #999 #888 #777 #666 #333 #222;
padding:10px;