您的位置:首页> 前端教程> CSS3教程
文章导航

CSS appearance

2019-8-27 08:40| 作者: admin| 查看: 1302| 评论: 0|来自: 蚂蚁部落

此属性可以改变指定元素的外观,比如可以将<p>段落元素渲染为按钮的外观。

它还是很有实际意义,很多元素在不同浏览器中渲染的效果,用appearance进行一下弥补。

语法结构:

[CSS] 纯文本查看 复制代码
appearance: <appearance>;

特别说明:此属性尚处于试验阶段,浏览器支持度很差。

代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</title> 
<style type="text/css"> 
div{
  width:150px;
  height:30px;
  font-size:12px;
  margin:5px;
  text-align:center;
  line-height:30px;
}
.button{
  -webkit-appearance:button;
  -moz-appearance:button;
}
.listbox{
  -webkit-appearance:listbox;
  -moz-appearance:listbox;
}
.listitem{
  -webkit-appearance:listitem;
  -moz-appearance:listitem;
}
.searchfield{
  -webkit-appearance:searchfield;
  -moz-appearance:searchfield;
}
.textarea{
  -webkit-appearance:textarea;
  -moz-appearance:textarea;
}
.menulist{
  -webkit-appearance:menulist;
  -moz-appearance:menulist;
}
</style>
</head>  
<body>  
<div class="button">蚂蚁部落一</div>
<div class="listbox">蚂蚁部落二</div>
<div class="listitem">蚂蚁部落三</div>
<div class="searchfield">蚂蚁部落四</div>
<div class="textarea">蚂蚁部落五</div>
<div class="menulist">蚂蚁部落六</div>
</body> 
</html>

代码演示了属性的相关用法,当前属性在各个浏览器存在很大兼容问题,这里不是考虑的重点。

常用属性值罗列:

[CSS] 纯文本查看 复制代码
checkbox
radio
push-button
square-button
button
button-bevel
listbox
listitem
menulist
menulist-button
menulist-text
menulist-textfield
scrollbarbutton-up
scrollbarbutton-down
scrollbarbutton-left
scrollbarbutton-right
scrollbartrack-horizontal
scrollbartrack-vertical
scrollbarthumb-horizontal
scrollbarthumb-vertical
scrollbargripper-horizontal
scrollbargripper-vertical
slider-horizontal
slider-vertical
sliderthumb-horizontal
sliderthumb-vertical
caret
searchfield
searchfield-decoration
searchfield-results-decoration
searchfield-results-button
searchfield-cancel-button
textfield
textarea

关于各个属性值的具体表现,大家可以自行测试。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部