css3常见新特性介绍


本文摘自PHP中文网,作者V,侵删。

新的元素选择器

1

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

又称圆角属性,通常使用该属性将图片圆角化,如头像。

1

border-radius: 50%;

border-radius另外一个常用的手段是CSS动画。

word-wrap & text-overflow

word-wrap属性用来指出浏览器在单词内进行断句,防止字符串太长而找不到它的自然断句点时产生的溢出。

1

word-wrap: break-word;

text-overflow用于文本溢出:

单行缩略的实现如下:

1

2

3

4

5

.oneline {

    white-space: nowrap; //强制文本在一行内输出

    overflow: hidden; //隐藏溢出部分

    text-overflow: ellipsis; //对溢出部分加上...

}

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

1

2

3

4

5

6

7

8

9

10

.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常见新特性介绍的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

CSS3 简介

border-image-slice属性怎么用

详细介绍精选html5/CSS3动画应用源码分享

<basic-shape>是什么?有什么用?

CSS3 transition-duration属性怎么用

animation-iteration-count属性怎么用

html5包含CSS3

通过案例,了解CSS3创建简单动画的方法

background-size属性怎么用

CSS3的含义是什么

更多相关阅读请进入《CSS3》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...