CSS3 appearance屬性使用示例

發(fā)布時(shí)間：2020-05-12 09:05:45 來源：億速云閱讀：215 作者：Leah 欄目：web開發(fā)

今天小編就為大家?guī)硪黄狢SS3 appearance屬性使用的文章。小編覺得挺不錯(cuò)的，為此分享給大家做個(gè)參考。一起跟隨小編過來看看吧

CSS3 appearance屬性用于修改元素的默認(rèn)的樣式，改變元素的外觀。

CSS3 appearance屬性

作用：appearance 屬性允許您使元素看上去像標(biāo)準(zhǔn)的用戶界面元素。

語法：

appearance: normal|icon|window|button|menu|field;

屬性值：

●　normal：正常呈現(xiàn)元素

●　icon：作為一個(gè)小圖片來呈現(xiàn)元素。

●　window：作為一個(gè)視口來呈現(xiàn)元素。

●　button：作為一個(gè)按鈕來呈現(xiàn)元素。

●　menu：作為一個(gè)用戶選項(xiàng)設(shè)定來呈現(xiàn)元素選擇。

●　field：作為一個(gè)輸入字段來呈現(xiàn)元素。

說明：IE和Opera不支持appearance屬性；Firefox需要添加-moz-前綴，支持 -moz-appearance屬性；Safari 和 Chrome需要添加前綴-webkit-，支持 -webkit-appearance屬性。

CSS3 appearance屬性的使用示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>億速云(php.cn)</title>
<style> 
.butto
{
padding:10px;
appearance:button;
-moz-appearance:button; /* Firefox */
-webkit-appearance:button; /* Safari and Chrome */
</style>
</head>
<body>
<div class="butto">測試文本--butto</div>
</body>
</html>

效果圖：

CSS3 appearance屬性使用示例

說明：由于 appearance屬性還沒有成為標(biāo)準(zhǔn)，在渲染時(shí)，仍然是各瀏覽器各自為政，還無法達(dá)到統(tǒng)一的標(biāo)準(zhǔn)。因此，在不同瀏覽器中會(huì)得到不同的渲染效果。

看完上訴內(nèi)容，你們掌握CSS3 appearance屬性的使用方法了嗎？如果想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！

向AI問一下細(xì)節(jié)

CSS3 appearance屬性使用示例

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽