CSS3 appearance属性怎么用？

PHP中文网 JavaScript

本文摘自PHP中文网，作者青灯夜游，侵删。

CSS3 appearance属性用于修改元素的默认的样式，改变元素的外观。

CSS3 appearance属性

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

语法：

1

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属性的使用示例

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<!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属性怎么用？的详细内容，更多文章请关注木庄网络博客！

相关阅读 >>

box-shadow属性的功能是什么

<basic-shape>是什么？有什么用？

transition-property属性怎么用

css3有关特性查询功能的讲解介绍

css与css3的区别是什么

css中什么是:placeholder-shown？如何工作？有什么用？

css3 flex布局总结

css3实现文字折纸效果的方法（代码示例）

css3中让图像居中可以使用哪个元素

css实现基于用户滚动应用（代码）

更多相关阅读请进入《appearance属性》频道 >>




标签：

打赏

取消

感谢您的支持，我会继续努力的!

扫码支持
扫码打赏，您说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦

分享从这里开始，精彩与您同在

相关推荐

评论

管理员已关闭评论功能...