前端之CSS3新特性一览

2017-07-10 19:22:00 2880 11 编辑:Monster 来源:前端技术分享

除了html5的新特性,CSS3的新特性也是面试中经常被问到的。


选择器

CSS3中新添加了很多选择器,解决了很多之前需要用javascript才能解决的布局问题。

element1~element2: 选择前面有element1元素的每个element2元素。

[attribute^=value]: 选择某元素attribute属性是以value开头的。

[attribute$=value]: 选择某元素attribute属性是以value结尾的。

[attribute*=value]: 选择某元素attribute属性包含value字符串的。

Sz:first-of-type: 选择属于其父元素的首个Sz元素的每个Sz元素。

Sz:last-of-type: 选择属于其父元素的最后Sz元素的每个Sz元素。

Sz:only-of-type: 选择属于其父元素唯一的Sz元素的每个Sz元素。

Sz:only-child: 选择属于其父元素的唯一子元素的每个Sz元素。

Sz:nth-child(n): 选择属于其父元素的第n个子元素的每个Sz元素。

Sz:nth-last-child(n): 选择属于其父元素的倒数第n个子元素的每个Sz元素。

Sz:nth-of-type(n): 选择属于其父元素第n个Sz元素的每个Sz元素。

Sz:nth-last-of-type(n): 选择属于其父元素倒数第n个Sz元素的每个Sz元素。

Sz:last-child: 选择属于其父元素最后一个子元素每个Sz元素。

:root: 选择文档的根元素。

Sz:empty: 选择没有子元素的每个Sz元素(包括文本节点)。

Sz:target: 选择当前活动的Sz元素。

Sz:enabled: 选择每个启用的Sz元素。

Sz:disabled: 选择每个禁用的Sz元素。

Sz:checked: 选择每个被选中的Sz元素。

Sz:not(selector): 选择非selector元素的每个元素。

Sz::selection: 选择被用户选取的元素部分。


边框

CSS3新增了三个边框属性,分别是border-radius、box-shadow和border-image。border-radius可以创建圆角边框,box-shadow可以为元素添加阴影,border-image可以使用图片来绘制边框。IE9+支持border-radius和box-shadow属性。Firefox、Chrome以及Safari支持所有新的边框属性。


背景

CSS3新增了几个关于背景的属性,分别是background-clip、background-origin、background-size和background-break。


background-clip

background-clip属性用于确定背景画区,有以下几种可能的属性:

background-clip: border-box; 背景从border开始显示

background-clip: padding-box; 背景从padding开始显示

background-clip: content-box; 背景显content区域开始显示

background-clip: no-clip; 默认属性,等同于border-box

通常情况,背景都是覆盖整个元素的,利用这个属性可以设定背景颜色或图片的覆盖范围。


background-origin

background-clip属性用于确定背景的位置,它通常与background-position联合使用,可以从 border、padding、content来计算background-position(就像background-clip)。

background-origin: border-box; 从border开始计算background-position

background-origin: padding-box; 从padding开始计算background-position

background-origin: content-box; 从content开始计算background-position


background-size

background-size属性常用来调整背景图片的大小,主要用于设定图片本身。有以下可能的属性:

background-size: contain; 缩小图片以适合元素(维持像素长宽比)

background-size: cover; 扩展元素以填补元素(维持像素长宽比)

background-size: 100px 100px; 缩小图片至指定的大小

background-size: 50% 100%; 缩小图片至指定的大小,百分比是相对包 含元素的尺寸


background-break

CSS3中,元素可以被分成几个独立的盒子(如使内联元素span跨越多行),background-break 属性用来控制背景怎样在这些不同的盒子中显示。

background-break: continuous; 默认值。忽略盒之间的距离(也就是像元素没有分成多个盒子,依然是一个整体一样)

background-break: bounding-box; 把盒之间的距离计算在内;

background-break: each-box; 为每个盒子单独重绘背景。


渐变

CSS3新增了渐变效果,包括linear-gradient(线性渐变)和radial-gradient(径向渐变)。具体用法参考教程:CSS3 Gradient


@font-face特性

在CSS3之前,web设计师必须使用已在用户计算机上安装好的字体。通过CSS3,web设计师可以使用他们喜欢的任意字体。当您您找到或购买到希望使用的字体时,可将该字体文件存放到web服务器上,它会在需要时被自动下载到用户的计算机上。字体是在 CSS3 @font-face 规则中定义的。Firefox、Chrome、Safari以及Opera支持 .ttf(True Type Fonts)和 .otf(OpenType Fonts)类型的字体。IE9+ 支持新的@font-face规则,但是仅支持 .eot类型的字体(Embedded OpenType)。

在新的@font-face规则中,必须首先定义字体的名称(比如myFont),然后指向该字体文件。

如需为HTML元素使用字体,请通过font-family属性来引用字体的名称 (myFont)

@font-face {

    font-family: myFirstFont;

    src: url('Sansation_Light.ttf'),

         url('Sansation_Light.eot'); /* IE9+ */

}

div{

    font-family:myFirstFont;

}


文字效果

word-wrap

CSS3中,word-wrap属性允许您允许文本强制文本进行换行,即这意味着会对单词进行拆分。所有主流浏览器都支持 word-wrap 属性。

p {

    word-wrap:break-word;

}


text-overflow

它与word-wrap是协同工作的,word-wrap设置或检索当当前行超过指定容器的边界时是否断开转行,而 text-overflow则设置或检索当当前行超过指定容器的边界时如何显示。对于“text-overflow”属性,有“clip”和“ellipsis”两种可供选择。


text-shadow

CSS3中,text-shadow可向文本应用阴影。能够规定水平阴影、垂直阴影、模糊距离,以及阴影的颜色。

h1{

    text-shadow: 5px 5px 5px #FF0000;

}


text-decoration

CSS3里面开始支持对文字的更深层次的渲染,具体有三个属性可供设置:

text-fill-color: 设置文字内部填充颜色

text-stroke-color: 设置文字边界填充颜色

text-stroke-width: 设置文字边界宽度


用户界面

CSS3中,新的用户界面特性包括重设元素尺寸、盒尺寸以及轮廓等。Firefox、Chrome以及Safari 支持resize属性。IE、Chrome、Safari以及Opera支持box-sizing属性。Firefox需要前缀-moz-。

所有主流浏览器都支持outline-offset属性,除了IE。


resize

resize 属性规定是否可由用户调整元素尺寸。如果希望此属性生效,需要设置元素的 overflow 属性,值可以是 auto、hidden 或 scroll。

div{

    resize:both; /* none|both|horizontal|vertical; */

    overflow:auto;

}


box-sizing

box-sizing属性可设置的值有content-box、border-box和inherit。

content-box: padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和,即 (Element width = width + border + padding),此属性表现为标准模式下的盒模型。

border-box: padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值,即使定义有border和padding也不会改变对象的实际宽度,即 (Element width = width),此属性表现为怪异模式下的盒模型。


outline-offset

outline-offset属性对轮廓进行偏移,并在超出边框边缘的位置绘制轮廓。

本站文章均为深正网站建设摘自权威资料,书籍,或网络原创文章,如有版权纠纷或者违规问题,请即刻联系我们删除,我们欢迎您分享,引用和转载,但谢绝直接搬砖和抄袭!感谢...
关注深正互联

15

技术从业经验

多一份方案,会有收获...

联系深正互联,免费获得专属《策划方案》及报价

在线咨询
微信交谈
拒绝骚扰,我们只想为给您带来一些惊喜...
多一份免费策划方案,总有益处。

请直接添加技术总监微信联系咨询

深正互联微信
扫描即可沟通