首页 > web前端 > css教程 > css3常见新特性介绍

css3常见新特性介绍

王林
发布: 2020-06-17 16:35:54
转载
3116 人浏览过

css3常见新特性介绍

新的元素选择器

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常见新特性介绍的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:juejin.im
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板