CSS3與濾境(14)-使用者介面

CSS3在使用者介面上提供了更多的功能,不過這個部份的內容還不完全,很多語法瀏覽器並不支援,或是只支援一半而已。算是給大家參考未來可能會支援的功能。

屬性名稱

box-sizing(元素並排)、resize(重新調整)、outline-offset(輪廓距離)

appearance(以介面顯示)、icon(元素圖示)

nav-index(tab順序)、nav-up、nav-left、nav-right、nav-down

appearance

說明:讓元素以標準使用者介面呈現。雖然有很多種屬性值,但目前似乎只有button有效果。

屬性值:normal(正常)、icon(圖示)、window(視窗)、button(按鈕)、menu(選單)、field(文字輸入框)

【範例】

div {
    appearance:button;      /* 不支援IE與Opera瀏覽器 */
    -moz-appearance:button;     /* Firefox 使用的語法 */
    -webkit-appearance:button;  /* Chrome、Safari 使用的語法 */
}

【結果】

這是一個DIV元素

box-sizing

說明:允許元素並排。需結合float屬性使用。雖然有分成border-box與content-box,不過看不太出來有什麼差別。

屬性值:border-box、content-box、inherit(繼承父元素設定)

【範例】

.box {
    border:2px solid;
    width:100px;

    box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox 使用的語法 */
    -webkit-box-sizing:border-box;  /* Safari 使用的語法 */
    float:left;
}

【結果】

This is Box1.
This is Box2.

outline-offset

說明:指定border與outline之間的距離。

屬性值:(長度)、inherit(繼承父元素設定)

【範例】

div {
    width:200px;
    border:2px solid black;
    outline:2px solid red;

    outline-offset:10px;    /* 不支援IE與Opera瀏覽器 */
} 

【結果】

outline-offset可指定border與outline之間的距離。

resize

說明:讓使用者可以重新調整元素大小。overflow需為auto。

屬性值:none(不允許)、both(可調整寬度和高度)、horizontal(可調整寬度)、vertical(可調整高度)

【範例】

div {
    border:2px solid;
    padding:5px;
    width:200px;

    resize:both;    /* 不支援IE與Opera瀏覽器 */
    overflow:auto;
}

【結果】

resize屬性可以允許使用者重新調整元素大小。