Home > Article > Web Front-end > How to use CSS3 appearance property?
How to use CSS3 appearance property?
- 青灯夜游Original
- 2019-02-20 13:22:065151browse
CSS3 appearance property is used to modify the default style of the element and change the appearance of the element.
CSS3 appearance property
Role:The appearance property allows you to make an element Looks like standard user interface elements.
Syntax:
appearance: normal|icon|window|button|menu|field;
Attribute value:
●Normal: render the element normally
●icon : Presents the element as a small image.
●Window: Presents elements as a viewport.
●Button: Presents the element as a button.
● Menu: Presents element selection as a user option setting.
● Field: Presents the element as an input field.
Note: IE and Opera do not support the appearance attribute; Firefox needs to add the -moz- prefix to support the -moz-appearance attribute; Safari and Chrome need to add the prefix -webkit- to support -webkit -appearance attribute.
CSS3 appearance attribute usage example
<!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>Rendering:
Instructions : Since the appearance attribute has not yet become a standard, when rendering, each browser still operates independently and cannot yet reach a unified standard. Therefore, you will get different rendering effects in different browsers.
The above is the entire content of this article, I hope it will be helpful to everyone's study.
The above is the detailed content of How to use CSS3 appearance property?. For more information, please follow other related articles on the PHP Chinese website!