Introduction to common new features of css3

New element selector

E:nth-last-child(n), E:nth-of-type(n), E:nth-last-of-type(n), E:last-child, E:first-of-type, E:only-child, E:only-of-type, E:empty, E:checked, E:enabled, E:disabled, E::selection, E:not(s)

border-radius

Also known as the rounded corner attribute , usually use this attribute to round the corners of pictures, such as avatars.

border-radius: 50%;

border-radius Another commonly used method is CSS animation.

word-wrap & text-overflow

The word-wrap attribute is used to indicate that the browser will segment sentences within the word to prevent the string from being too long and unable to find it. The overflow occurs when the natural break period occurs.

word-wrap: break-word;

text-overflow is used for text overflow:

The implementation of single-line abbreviation is as follows:

.oneline {
    white-space: nowrap; //强制文本在一行内输出
    overflow: hidden; //隐藏溢出部分
    text-overflow: ellipsis; //对溢出部分加上...
}

The implementation of multi-line abbreviation is as follows (mainly for webkit kernel):

.multiline {
    display: -webkit-box !important;
    overflow: hidden;
    
    text-overflow: ellipsis;
    word-break: break-all;
    
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

background

Mainly have the following three attributes:

• background-clip specifies the drawing area of ​​the background, and the value is border -box | padding-box | content-box | no-clip

• background-origin specifies the positioning area of ​​the background, the value is border | padding | content

• background-size specifies the size of the background image, the value is [ | | auto]{1,2} | cover | contain

Recommended tutorial: css Quick Start

The above is the detailed content of Introduction to common new features of css3. For more information, please follow other related articles on the PHP Chinese website!