CSS3新特性

1.简介

CSS即层叠样式表，用于控制网页的样式和布局

CSS3是CSS2.1技术的升级，目前主流浏览器都已经支持大部分的功能。

在编写CSS3样式时，不同的浏览器可能需要不同的前缀，这表明CSS属性或规则尚未成为W3C标准的一部分，是浏览器的私有属性，虽然目前较新的浏览器可能不需要前缀了，但是为了更好的向前兼容，前缀暂时还不能少。

2.CSS3能做什么

CSS3把很多以前需要使用图片和脚本来实现的效果、甚至动画效果，只需要短短几行代码就能搞定。例如圆角、图片边框、文字阴影、盒阴影、过渡、动画等。

CSS简化了前端开发人员的设计过程，加快了页面的载入速度。

3.选择符

3.1关系选择符

包含选择符（E F）

包含选择符将会命中所有符合条件的后代，包括儿子，孙子，孙子的孙子...

子元素选择符（E>F）

子选择符只能命中子元素，而不能命中孙辈

相邻选择符（E+F）

相邻选择符只会命中符合条件的相邻的兄弟元素

兄弟选择符（E~F）

兄弟选择符会命中所有符合条件的兄弟元素，而不强制是紧邻的元素。

3.2属性选择符

E[att]

选择具有att属性的E元素

E[att="val"]

选择具有att属性且属性值等于val的E元素。

E[att~="val"]

选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素（包含只有一个值且该值等于val的情况）。

E[att|="val"]

选择具有att属性且属性值为以val开头并用连接符‘-’分隔的字符串的E元素，如果属性值仅为val，也将被选择。

E[attr^="val"]

选择具有att属性且属性值为以val开头的字符串的E元素。

E[att$="val"]

选择具有att属性且属性值为以val结尾的字符串的E元素。

E[att*="val"]

选择具有att属性且属性值为包含val的字符串的E元素。

3.3伪类选择符

E:link

设置超链接a在未被访问前的样式

E:visited

设置超链接a在其链接地址已被访问过时的样式。

E:hover

设置元素在其鼠标悬停时的样式。

E:active

设置元素在被用户激活（在鼠标点击和释放之间发生的事件）时的样式。

E:last-child

匹配父元素的最后一个子元素E，要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是body，即E可以是body的子元素。                         

E:only-child

匹配父元素仅有的一个子元素E，要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是body，即E可以是body的子元素。

E:nth-child(n)

匹配父元素的第n个子元素E，假设该子元素不是E，则选择符无效。

要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是body，即E可以是body的子元素。

该选择符允许使用一个乘法因子（n）来作为换算方式，比如我们想选中所有的偶数子元素E，那么选择符可以写成 E:nth-child(2n)，该选择符允许使用一些关键字，比如：odd、even。

E:nth-last-child(n)

匹配父元素的倒数第n个元素E，假设该子元素不是E，则选择符无效。

E:first-of-type

匹配同类型中的第一个同级兄弟元素E。

E:last-of-type

匹配同类型中的最后一个同级兄弟元素E。

E:only-of-type

匹配同类型中的唯一的一个同级兄弟元素E。

E:nth-of-type(n)

父元素下第n个E元素。

E:nth-last-of-type(n)

匹配同类型中的倒数第n个同级兄弟元素E。

E:empty

匹配没有任何子元素（包括text节点）的元素E。

E:checked

匹配用户界面上处于选中状态的元素E。（用于input type为radio与checkbox时)

E:not(s)

匹配不含有s选择符的元素E。如ul li:not(.class3){color:red}

注意，这里说明一下E:nth-child(n)与E:nth-of-type(n)的区别,E:nth-child(n)作用在第n个子元素，如果子元素不是E则不起作用。而E:nth-of-type(n)是指在所有的E元素中，作用在第n个E元素上，实例如下：

<ul>

<i>this is i</i>

<li>this is l1</li>

<li>this is l2</li>

</ul>

E:nth-child(1){color:red} 效果如下

E:nth-of-type(1){color:red} 效果如下

3.4伪元素选择符

E:before/E::before

设置在对象前（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用，并且必须定义content属性

E:after/E::after

设置在对象后（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用，并且必须定义content属性

:first-line

用于向文本的首行设置特殊样式。

:first-letter

用户向文本的首字母设置特殊样式。

4.常用样式

4.1 text-shadow:h-shadow v-shadow color blur

4.2 word-wrap:break-word,word-break:break-all

word-wrap属性允许长单词或URL地址换行到下一行。

word-break属性规定自动换行的处理方法。

这两个属性很容易混淆，这里我们来看一下区别

div{width:200px;height:60px;border:red 1px solid}

<div>this is divddddddddddddd</div>

显示如下:

这里使用的是浏览器的默认属性，若我们添加word-wrap:break-word属性时，div{width:200px;height:60px;border:red 1px solid;word-wrap:break-word}，显示如下：

看似word-wrap:break-word这个属性添加并没有什么效果,这里我们把word-wrap:break-word这个属性去掉，然后把最后一个单词加长，

div{width:200px;height:60px;border:red 1px solid}

<div>this is divdddddddddddddddddddddddddd<div>

显示如下：

我们发现当使用浏览器的默认属性时，单词会溢出容器，这里我们再加上word-wrap:break-word属性，它使长单词换行到下一行，显示为

然而我们发现这个长单词过长造成‘this is‘后面留了大量空白,这就有了word-break属性，

div{width:200px;height:60px;border:red 1px solid;word-break:break-all;}

<div>this is divdddddddddddddddddddddddddd<div>

显示如下：

通过比较我们可以发现word-wrap和word-break的区别，这两个的相同点是都能对长单词强行断句，不同点是word-wrap:break-word会首先起一个新行来放置长单词，新的行还是放不下这个长单词则会对长单词进行强制断句；而word-break:break-all则不会把一个长单词放在一个新行里，当这一行放不下的时候就直接强制断句了。

4.3 @font-face属性

这个属性主要用来自定义字体，使用方法如下：

@font-face{

font-family:"myfont";

src:url('font/huakang.ttf');

}

p{font-family:"myfont"}

4.4 background-clip属性：规定背景图片的绘制区域

border-box    背景被裁剪到边框盒（默认值）

padding-box 背景被裁剪到内边距框

content-box   背景被裁剪到内容框

区别如下：

div{

width:100px;

height:100px;

padding:10px;

border:grey 10px solid;

background:url(1.png) no-repeat;

background-clip:padding-box;

}

此时背景图片绘制到padding,显示如下

若将属性设置为content-box，背景图片只在content部分绘制，如下图

但是我们发现当设置为border-box时，背景图片并没有绘制到边框里面，显示如下：

这时我们就要用到background-orgin属性，设置background-orgin:border-box，让图像从边框开始绘制

div{

width:100px;

height:100px;

padding:10px;

border:grey 10px solid;

background:url(1.png) no-repeat;

background-clip:border-box;

background-orgin:border-box;

}

显示如下：

4.5 background-orgin属性：控制背景图像开始绘制的位置

border-box    背景图像从边框开始绘制

padding-box 背景图像从内边距开始绘制（默认值）

content-box   背景图像从内容开始绘制

注意background-clip、background-orgin配合使用可以实现一些效果，例如

div{

width:100px;

height:100px;

padding:10px;

border:grey 10px solid;

background:url(1.png) no-repeat;

background-clip:content-box;

background-orgin:border-box;

}

背景绘制区域为content部分，而背景图像从border左上角开始绘制，就会出现如下效果：

4.6 background-size:length|percentage|cover|contain;

length:         设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为“auto”。

percentage:以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为“auto”。

cover:           把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。

contain:        把背景图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

注意，这里说一下cover与contain的区别，相同点：都是将图片以相同宽高比缩放，以适应整个容器的宽和高。不同点：如果容器的宽高比和图片的宽高比不同，

cover:图片宽高比不变、铺满整个容器的宽高，而图片多出的部分则会被裁掉；

contain:图片自身的宽高比不变，缩放至图片自身能完全显示出来，所以容器会有留白区域。

例如div宽高比2：1，背景图片宽高1：1，background-size分别设置为cover和contain,显示如下

background-size:coverbackground-size:contain

4.7 border-radius:给元素添加圆角边框

border-radius:2px等价于

border-top-left-radis:2px;

border-top-right-radius:2px;

border-bottom-right-radius:2px;

border-bottom-left-radius:2px;

4.8 box-shadow属性:给框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由2-4个长度值、可选的颜色值以及可选的inset关键词来规定。省略的长度的值是0。

box-shadow:h-shadow  v-shadow  blur  spread  color  inseth-shadow必需。水平阴影的位置。允许负值。v-shadow必需。垂直阴影的位置。允许负值。blur可选。模糊距离。0是没有模糊效果就是最清楚，原始效果的拷贝，值越大越模糊spread可选。阴影的尺寸。color可选。阴影的颜色。请参阅 CSS 颜色值。inset可选。将外部阴影 (outset) 改为内部阴影。

4.9 linear-gradient、radial-gradient:线性渐变与径向渐变

兼容不同浏览器的几种写法

-moz-linear-gradient(point||angle,stop,stop...);

-webkit-linear-gradient(point||angle,stop,stop...);

-o-linear-gradient(point||angle,stop,stop...);

参数：其中有三个参数，第一个参数表示线性渐变的方向，top是从上到下、left是从左到右，如果定义成left top，就是从左上角到右下角。第二个和第三个参数分别是起点颜色和终点颜色。也可以在它们之间插入更多的参数，表示多种颜色的渐变，例如

-moz-linear-gradient(left,red,green,blue);

-webkit-linear-gradient(left,red,green,blue);

-o-linear-gradient(left,red,green,blue);

显示如下：

当然也可以定义渐变从斜上角开始

-moz-linear-gradient(left top,red,green,blue);

-webkit-linear-gradient(left top,red,green,blue);

-o-linear-gradient(left top,red,green,blue);

显示如下

第一个参数我们也可以设置角度(逆时针方向)

-moz-linear-gradient(45deg,red,green,blue);

-webkit-linear-gradient(45deg,red,green,blue);

-o-linear-gradient(45deg,red,green,blue);

渐变上用上透明度，透明渐变对于制作一些特殊的效果是相当有用的，例如，当堆叠多个背景时，这里是两个背景的结合：一张图片，一个白色到透明的线性渐变，示例如下

background:-webkit-linear-gradient(right,rgba(255,255,255,0),rgba(255,255,255,1)),url(bg.png);

background:-moz-linear-gradient(right,rgba(255,255,255,0),rgba(255,255,255,1)),url(bg.png);

background:-o-linear-gradient(right,rgba(255,255,255,0),rgba(255,255,255,1)),url(bg.png);

显示如下：

5. 2D转换

transform属性向元素应用2D或3D转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

translate(x,y)定义2D转换，沿着X、Y轴移动元素//例如{transform:translate(50px,100px);}rotate(angle)定义2D旋转，单位：deg,通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转//例如{transform:rotate(30deg);}scale(x,y)定义2D缩放转换，改变元素的宽和高//例如{transform:scale(2,4);}skew(x-angle,y-angle)定义2D倾斜转换，元素翻转给定的角度，沿着X 轴、Y 轴//例如{transform:skew(30deg,20deg);}matrix(n,n,n,n,n,n,n)定义2D转换，使用6个值的矩阵。注：也可以同时设置多个2D转换，如{transform: translate(30px,20px) rotate(30deg) scale(0.5) skew(50deg);}

6. 过渡:是元素从一种样式逐渐改变为另一种的效果

transition 属性是一个简写属性，用于设置四个过渡属性：transition-property:规定设置过渡效果的css属性的名称，all(所有属性改变)、[attr]（指定属性）、none（没有属性会获得过渡效果）transition-duration:规定完成过渡效果需要多少秒或毫秒transition-timing-function:规定过渡效果的速度曲线，默认属性ease(慢速开始，然后变快，然后慢速结束)、linear(匀速)、ease-in(加速)、ease-out(减速)、ease-in-out(先加速然后减速)、cubic-bezier(自定义一个时间曲线)（number...）transition-delay:   定义过渡效果何时开始

例如:

div{width:100px; height:100px; transition:width 2s}

div:hover{width:200px;}

7.keyframe animation关键帧动画

通过@keyframes规则,能够创建动画。创建动画的原理是，将一套CSS样式逐渐变化为另一套样式

animation:animation-name duration timing-function delay iteration-count direction fill-mode play-state

animation-name:指定要绑定到选择器的关键帧的名称

duration:动画指定需要多少秒或毫秒完成。默认是0

timing-function:设置动画将如何完成一个周期。默认是ease。linear（线性）、ease（从低速开始，然后加快，在结束前变慢）、ease-in（动画以低速开始）、ease-out（动画以低速结束）、ease-in-out（动画以低速开始和结束）

delay:设置动画在启动前的延迟周期。默认0

iteration-count:设置动画的播放次数。默认1。n:一个数字，定义应该播放多少次动画; infinite:指定动画应该播放无限次。

direction:指定是否应该轮流反向播放动画。normal:默认值。动画应该正常播放；alternate:动画应该轮流反向播放

fill-mode:属性规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要用到元素的样式 none|forwards|backwards|both

animation-play-state:指定动画是否正在运行或已暂停。paused:指定暂停动画|running:指定正在运行的动画

@keyframes animationname { keyframes-selector {css-styles;}}

animationname:必需。定义动画的名称。

keyframes-selector:必需。动画时长的百分比。合法值：0-100%、from(与0%相同)、to(与100%相同)

css-styles:必需。一个或多个合法的CSS样式属性。

例如：

div{width:100px; height:100px; background:red; animation: myfirst 5s linear infinite}

@keyframes myfirst{

0%{background:red}

     25%{background:green}

     50%{background:blue}
75%{background:cyan}
     100%{background:red}

}

动画的运行状态 ：animation-play-state:paused|running;

规定动画应该无限次播放：animation: myfirst 5s infinite;

动画应该轮流反向播放：animation:myfirst 5s infinite alternate;