• 技术文章 >web前端 >css教程

    CSS3 appearance属性怎么用?

    青灯夜游青灯夜游2020-09-08 16:10:19原创2091
    CSS3 appearance属性用于修改元素的默认的样式,改变元素的外观。

    CSS3 appearance属性

    作用:appearance 属性允许您使元素看上去像标准的用户界面元素。

    语法:

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

    属性值:

    ● normal:正常呈现元素

    ● icon:作为一个小图片来呈现元素。

    ● window:作为一个视口来呈现元素。

    ● button:作为一个按钮来呈现元素。

    ● menu:作为一个用户选项设定来呈现元素选择。

    ● field:作为一个输入字段来呈现元素。

    说明:IE和Opera不支持appearance属性;Firefox需要添加-moz-前缀,支持 -moz-appearance属性;Safari 和 Chrome需要添加前缀-webkit-,支持 -webkit-appearance属性。

    CSS3 appearance属性的使用示例

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>PHP中文网(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>

    效果图:

    2.jpg

    说明:由于 appearance属性还没有成为标准,在渲染时,仍然是各浏览器各自为政,还无法达到统一的标准。因此,在不同浏览器中会得到不同的渲染效果。

    以上就是本篇文章的全部内容,希望能对大家的学习有所帮助。

    以上就是CSS3 appearance属性怎么用?的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:appearance属性 CSS3
    上一篇:css3 icon属性怎么用? 下一篇:css border-bottom属性怎么用?

    相关文章推荐

    • CSS3属性 Transitions, Transforms和Animation_html/css_WEB-ITnose• 判断浏览器是否支持css3属性或单位_html/css_WEB-ITnose• 如何处理CSS3属性前缀_html/css_WEB-ITnose• IE系列不支持圆角等CSS3属性的解决方案_html/css_WEB-ITnose

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网