CSS3 user interface
In CSS3, some new user interface features have been added to adjust element size, box size and outer border.
In this chapter, you will learn about the following user interface properties:
resize
box-sizing
outline-offset
Browser support
The number in the table indicates the first browser that supports the attribute version number.
The number immediately before -webkit-, -ms- or -moz- is the first browser version number that supports this prefix attribute.
CSS3 Resizing
In CSS3, the resize attribute specifies whether an element should be resized by the user.
CSS code is as follows:
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
div
{
border:2px solid;
padding:10px 40px;
width:300px;
resize:both;
overflow:auto;
}
</style>
</head>
<body>
<p><b>注意:</b> Firefox, Safari,和 Chrome 兼容 resize 属性.</p>
<div>调整属性指定一个元素是否由用户可调整大小的。.</div>
</body>
</html>Running Example »
Click the "Run Example" button to view the online example
CSS3 Box Sizing
The box-sizing property allows you to The exact way to define the specific content adapted to a certain area.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
div.container
{
width:30em;
border:1em solid;
}
div.box
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
width:50%;
border:1em solid red;
float:left;
}
</style>
</head>
<body>
<div class="container">
<div class="box">这个div占据了左边的一半。.</div>
<div class="box">这个div占据了右边的一半。</div>
</div>
</body>
</html>Run Instance»
Click the "Run Instance" button to view the online instance
CSS3 outline modification (outline-offset)
The outline-offset property offsets the outline and draws the outline beyond the edge of the border.
There are two differences between outlines and borders:
Outlines do not take up space
Outlines may be non-rectangular
The CSS code is as follows:
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
div
{
margin:20px;
width:150px;
padding:10px;
height:70px;
border:2px solid black;
outline:2px solid red;
outline-offset:15px;
}
</style>
</head>
<body>
<p><b>注意:</b> Internet Explorer 不兼容 outline-offset属性.</p>
<div>这个 div有一个轮廓边界15 px边境外的边缘。</div>
</body>
</html>Run Example»
Click" Run Instance" button to view the online instance
New user interface features
| Properties | Description | CSS |
|---|---|---|
| appearance | Allows you to make an element look like a standard user interface element | 3 |
| box-sizing | Allows you to define certain elements in a certain way to fit the area | 3 |
| icon | Provides creators with the ability to set elements to their icon equivalents. | 3 |
| nav-down | Specifies where to navigate when using the arrow down navigation key | 3 |
| nav-index | Specify the order of the Tabs of an element | 3 |
| nav-left | Specify where to use the left arrow navigation keys to navigate | 3 |
| nav-right | Specify where to use Arrow navigation keys on the right to navigate | 3 |
| nav-up | Specifies where to navigate using the arrow up navigation key | 3 |
| outline-offset | Outline modification and drawing the edge beyond the border | 3 |
| resize | Specifies whether an element is resized by the user | 3 |
