CSS3 User Interface
CSS3 User Interface
In CSS3, increasing the number of new user interface features to adjust the element size, frame size and external borders.
In this chapter, you will learn the following user interface properties:
- resize
- box-sizing
- outline-offset
Browser Support
Figures in the table represent the first browser to support the version number of the property.
Immediately following the digital -webkit-, -ms- or -moz- ago in support of the prefix attribute first browser version number.
属性 | |||||
---|---|---|---|---|---|
resize | 4.0 | 不兼容 | 5.0 4.0 -moz- |
4.0 | 15.0 |
box-sizing | 10.0 4.0 -webkit- |
8.0 | 29.0 2.0 -moz- |
5.1 3.1 -webkit- |
9.5 |
outline-offset | 4.0 | 不兼容 | 5.0 4.0 -moz- |
4.0 | 9.5 |
CSS3 resizing (Resizing)
In CSS3, resize property specifies whether an element should the user to adjust the size.
CSS code is as follows:
CSS3 resize box (Box Sizing)
box-sizing property allows you to define the exact contents of a specific area of adaptation.
Examples
Provisions of two side by side with a border block:
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
width:50%;
float:left;
}
try it"
CSS3 modified shape (outline-offset)
outline-offset property offset contour and draw the profile beyond the edge of the border.
There are two different contour and frame:
- Contour does not occupy space
- It may be non-rectangular outline
The CSS code is as follows:
Examples
Provisions outside of the contour pixels at the edge of the border 15:
{
border:2px solid black;
outline:2px solid red;
outline-offset:15px;
}
try it"
The new user interface features
Attributes | Explanation | CSS |
---|---|---|
appearance | It allows you to make the appearance of an element like a standard user interface elements | 3 |
box-sizing | It allows you to adapt to the region and to define certain elements in some way | 3 |
icon | The creators of the element is set to Icon equivalent capacity. | 3 |
nav-down | Specifies where to navigate when using the arrow keys to navigate down | 3 |
nav-index | Specifies that an element of order Tab | 3 |
nav-left | Specify where to use the left arrow navigation keys to navigate | 3 |
nav-right | Specify where to use the right arrow navigation keys to navigate | 3 |
nav-up | Specifies where to navigate when using the arrow keys to navigate up | 3 |
outline-offset | Modified outer contour and draw over the edge of the border | 3 |
resize | Specify whether an element is resized by the user | 3 |