css3常见新特性介绍

css3常见新特性：1、添加了新的元素选中器，如【E:nth-last-child(n),E:nth-of-type(n)】；2、border-radius属性，该属性可以将图片圆角化；3、添加了background-clip属性。

新的元素选中器

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

又称圆角属性，平常运用该属性将图片圆角化，如头像。

border-radius: 50%;

border-radius别的一个常用的伎俩是CSS动画。

word-wrap & text-overflow

word-wrap属性用来指出阅读器在单词内进行断句，防止字符串太长而寻不到它的天然断句点时发生的溢出。

word-wrap: break-word;

text-overflow用于文本溢出:

单行缩略的实现如下:

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

多行缩略实现如下(主要针对webkit内核):

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

background

主如果下列三个属性:

• background-clip 规定配景的绘制区域, 取值为border-box | padding-box | content-box | no-clip

• background-origin 规定配景的定位区域, 取值为border | padding | content

• background-size 规定配景图片的尺寸, 取值为[ | | auto]{1,2} | cover | contain

举荐教程：css迅速入门

以上就是css3常见新特性介绍的细致内容，更多请关注 百分百源码网 其它相干文章！