Home>Article>Web Front-end> 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!