武林網(wǎng)(www.survivalescaperooms.com)文章簡介：CSS3 appearance簡介.

我們來簡單了解一下上文中提到的css appearance。在之前研究HTML5表單的時候，一直很好奇瀏覽器是通過什么渲染不同的表單界面的，后來在Chrome中查看類型為range的input的時候，發(fā)現(xiàn)了這個有趣的屬性：

然后右邊的樣式顯示是這樣的：

后來就發(fā)現(xiàn)CSS3規(guī)范中對appearance有定義，MDC也有對這個屬性的描述。

這真是個非常有趣的屬性，可以用來偽裝或是實現(xiàn)一些特殊的界面，比如將input[type=text]的appearance設(shè)置為button后，它看起來就像是一個按鈕了：

樣式如下：

1234input-moz-appearance:button; -webkit-appearance:button; appearance:button;}

不過現(xiàn)在只有webkit和firefox通過私有屬性支持，各大瀏覽器還都沒有完全正式的支持，而且它們支持的appearance屬性值也不完全相同。不過既然W3C將其列入規(guī)范中，相信不久的將來，各大瀏覽器都會對這個屬性實現(xiàn)一些基本的支持的吧，這樣我們就能更好的控制頁面中元素的表現(xiàn)了。

David Walsh不久前也簡單的講述了這個屬性，只是只針對webkit，他還做了個demo頁面。

關(guān)于CSS3 appearance，欲了解更多，請查閱：

我們也會不斷關(guān)注這個屬性在各個瀏覽器中的進展。