Basic CSS article: Introduction to new CSS 3 features

Border: (Borders)

Border-color: controls the border color and provides greater flexibility to produce gradient effects.

Border-image: controls border Images

Border-corner-image: controls the image at the border corner

Border-radius: it can produce effects similar to rounded rectangle

Background (Backgrounds)

Background-origin: determines the initial position of the background in the box model. It provides three values: border, padding, and content.

Border: controls the border starting from the upper left corner of the background.

Padding: whitelists starting from the upper left corner of the control background.

Content: content starting from the upper left corner of the control background

Background-clip: determines whether the border covers the background (not covered by default). It provides two values: border and padding.

Border: overwrite the background

Padding: Does not overwrite the background

Background-size: Specifies the background size in pixels or percentages. When the percentage is specified, the size is determined by the width and height of the region and the location of the background-origin.

Multiple backgrounds: Multi-background image. Different Background images can be placed in only one block element.

Text effects: (Text effects)

Text-shadow: text projection, probably because Safari of mac osx supports projection.

Text-overflow: when the text overflows, use the "..." prompt. Including ellipsis, clip, ellipsis-word, and inherit, the first two CSS2 are available. Currently, some support is available, but it is interesting that IE6 supports both. Ellipsis-word can omit the last word, which is of little significance to Chinese. inherit can inherit the parent element.

Color: (Color)

HSL colors: In addition to RGB eye colors, HSL (color phase, saturation, and brightness) is also supported ). In the past, we used HSL chromatography for plotting, but this would include more colors. H usage indicates that S and L are expressed in percentages, such as hsl (0,100%, 50%)
HSLA colors: adds an opacity, expressed by the number between 0 and 1, such as hsla (0,100%, 50%, 0.2)
Opacity: Controls opacity directly, expressed by the number between 0 and 1.
RGBA colors: similar to HSLA colors, an opacity is added.

User-interface)

Resize: You can adjust the div size by yourself, either horizontal (horizontal) vertical (vertical) or both (simultaneous), or at the same time. If max-width or min-width is added, the layout may be damaged.

Selector: (Selectors)

Attribute selectors: You can add wildcards to attributes, including ^, $ ,*

[Att ^ = val]: indicates that the start character is the att attribute of val.

[Att $ = val]: indicates that the ending character is the att attribute of val.

[Att * = val]: contains at least one att attribute of val.

Other modules: (Other modules)

Media queries: media selection is appropriate. You can set different browsing devices for different objects on the webpage. For example, you can set screen and mobile phone browsing styles for a specific part. Previously, you can only set the entire webpage.

Multi-column layout: multi-column layout that allows text to be displayed in multiple columns, including column-width, column-count, and column-gap values.

Column-width: Specify the width of each column
Column-count: specifies the number of Columns
Column-gap: Specify the spacing between each column
Column-rule-color: controls the color between columns
Column-rule-style: controls the style between columns
Column-rule-width: controls the width between columns
Column-space-distribution: average allocation column spacing