May 04, 2021 CSS3
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
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 |
In CSS3, the resize property specifies whether an element should be sized by the user.
The CSS code is as follows:
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:
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:
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 |