CSS3 user interface
May 04, 2021 CSS3
Table of contents
CSS3 user interface
CSS3 user interface
In CSS3, new user interface features have been added to adjust element size, box size, and outer border.
In this chapter, you'll learn about the following user interface properties:
-
resize
-
box-sizing
-
outline-offset
Browser support
The numbers in the table support the first browser version number of the property.
The number immediately before -webkit-, -ms- or -moz- is the first browser version number that supports the prefix property.
| 属性 | |||||
|---|---|---|---|---|---|
| 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
In CSS3, the resize property specifies whether an element should be sized by the user.
The CSS code is as follows:
CSS3 Box Sizing
The box-sizing property allows you to define exactly what fits into an area in an exact way.
Specify two side-by-side border boxes:
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
width:50%;
float:left;
}
Try it out . . .
CSS3 profile modification (outline-offset)
The outline-offset property offsets the outline and draws it beyond the edge of the border.
The outline is different from the border in two ways:
-
Contours do not take up space
-
The outline may be non-rectangular
The CSS code is as follows:
Specifies the outline at 15 pixels outside the edge of the border:
{
border:2px solid black;
outline:2px solid red;
outline-offset:15px;
}
Try it out . . .
New user interface features
In the following table are the new user interface properties for CSS3, you can click on the corresponding properties, learn more about the use of the corresponding properties, and so on:
| Property | 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 some way to fit the region | 3 |
| icon | Provides the author the ability to style an element with an iconic equivalent | 3 |
| nav-down | Specify where to navigate when using the arrow down navigation keys | 3 |
| nav-index | Specifies the order of tabs for an element | 3 |
| nav-left | Specify where to navigate using the arrow navigation keys on the left | 3 |
| nav-right | Specify where to navigate using the arrow navigation keys on the right | 3 |
| nav-up | Specify where to navigate when using the arrows to navigate up the keys | 3 |
| outline-offset | The outer outline is retouched and the edges beyond the border are drawn | 3 |
| resize | Specify whether an element is resized by the user | 3 |