CSS3新特性

1、过渡。

过渡，运用比较频繁，主要就是用于让一些交互效果（主要是hover）变得更加生动。

CSS3过渡是元素从一种样式逐渐改变为另一种的效果。要实现这一点，必须要规定两项内容：指定要添加效果的CSS属性指定效果的持续时间。

1.1语法。

transition: css属性，花费时间，效果曲线(默认ease)，延迟时间(默认0)

eg1:

/*宽度从原始值到指定值的一个过渡，运动曲线为ease，运动时间为0.5秒，0.2秒后执行过渡*/
transition:width,.5s,ease,.2s

2、动画。

动画主要是做一个预设的动画。和一些页面交互的动画效果，结果和过渡应该一样，让页面不会那么生硬。

2.1语法。

animation:动画名称，一个周期花费时间，运动曲线（默认ease），动画延迟（默认0），播放次数（默认1），是否反向播放动画（默认normal），是否暂停动画（默认running）

eg1：

/*执行一次logo-line动画，运动时间为2秒，运动曲线为linear*/
animation: logo-line 2s linear;

3、形状转换。

形状转换分为2d和3d转换。

3.1语法：

transform：适用于2D转换和3D转换的元素。

transform-origin：转换元素的位置（围绕哪个点进行转换）。默认（x，y，z）：（50%，50%，0）。

4、选择器。

css3提供的选择器可以让我们的开发，更加方便。

选择器	例子	例子描述
element1~element2	p~ul	选择前面有<p>元素的每个<ul>元素
[attribute^=value]	a[src^="https"]	选择其src属性值以“https”开头的每个<a>元素
[attribute$=value]	a[src$=".pdf"]	选择其src属性值以“.pdf”结尾的所有<a>元素
[attribute*=value]	a[src*="abc"]	选择其src属性中包含“abc”子串的每个<a>元素
:first-of-type	p:first-of-type	选择属于其父元素的首个<p>元素的每个<p>元素
:last-of-type	p:last-of-type	选择属于其父元素的最后一个<p>元素的每个<p>元素
:only-of-type	p:only-of-type	选择属于其父元素中唯一一个<p>元素的每个<p>元素
:only-child	p:only-child	选择其父元素中唯一子元素的每个<p>元素
:nth-child(n)	p:nth-child(2)	选择属于其父元素的第二个子元素的每个<p>元素
:nth-last-child(n)	p:nth-last-child(2)	同上，只不过是从最后一个子元素开始计数
:root	:root	选择文档的根元素
:empty	p:empty	选择没有子元素的的每个<p>元素
:target	#news:target	选择当前活动的#news元素
:enabled	input:enabled	选择每个启用的<input>元素
:disabled	input:disabled	选择每个禁用的<input>元素
:checked	input:checked	选择每个被选中的<input>元素
:not(selector)	:not(p)	选择非<p>元素的每个元素
::selection	::selection	选择被用户选取的元素部分

5、阴影。

5.1语法。

box-shadow:水平阴影的位置 垂直阴影的位置 模糊距离 阴影的颜色 阴影开始的方向（默认是从里往外，设置inset就是从外往里）;

box-shadow: 10px 10px 5px #888888

6、边框图片。

7、背景。

css3一共提供了3个背景相关属性：

background-clip：制定背景绘制（显示）区域。默认情况下（从边框开始绘制）。

background-origin：指定background-position属性应该是相对位置。

background-size：制定背景的大小。