css3 新特性

1.过渡    transition： CSS属性，花费时间，效果曲线(默认ease)，延迟时间(默认0)复制代码

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

3.形状转换   transform:适用于2D或3D转换的元素

rotate(30deg);   translate(30px,30px);   scale(.8);        skew(10deg,10deg);        rotateX(180deg);     rotateY(180deg);        rotate3d(10,10,10,90deg);

4.选择器

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

6.边框

边框图片:border-image: 图片url 图像边界向内偏移 图像边界的宽度(默认为边框的宽度) 用于指定在边框外部绘制偏移的量（默认0） 铺满方式--重复（repeat）、拉伸（stretch）或铺满（round）（默认：拉伸（stretch））;

边框圆角: border-radius

border-radius: n1,n2,n3,n4;

border-radius: n1,n2,n3,n4/n1,n2,n3,n4;

/*n1-n4四个值的顺序是：左上角，右上角，右下角，左下角。*/

7.背景  background-clip  制定背景绘制（显示）区域 background-origin    background-size

1.（background-clip: border-box;）默认情况（从边框开始绘制）                                                             

2.（background-clip: padding-box;）从padding开始绘制（显示），不算border,，相当于把border那里的背景给裁剪掉！             

3.（background-clip: content-box;）只在内容区绘制（显示），不算padding和border，相当于把padding和border那里的背景给裁剪掉！

8.反射     -webkit-box-reflect:方向[ above-上 | below-下 | right-右 | left-左 ]，偏移量，遮罩图片

9.文字   

1>换行 

 语法：word-break: normal|break-all|keep-all;、

语法：word-wrap: normal|break-word; 

超出省略号   text-overflow:clip|ellipsis|string

举个栗子:

<div>This is some long text that will not fit in the box</div>

 

div
{
    width:200px; 
    border:1px solid #000000;
    overflow:hidden;
    white-space:nowrap; 
    text-overflow:ellipsis;
}

2> 文字阴影   语法：text-shadow:水平阴影，垂直阴影，模糊的距离，以及阴影的颜色。

10.颜色 

rgba（rgb为颜色值，a为透明度）

color: rgba(255,00,00,1);

background: rgba(00,00,00,.5); 

hsla h:色相”，“s：饱和度”，“l：亮度”，“a：透明度” 

color: hsla( 112, 72%, 33%, 0.68);

background-color: hsla( 49, 65%, 60%, 0.68);复制代码

11.渐变  Gradient   线性渐变，径向渐变，圆锥渐变

12.Filter（滤镜）：黑白色filter: grayscale(100%)、褐色filter:sepia(1)、饱和度saturate(2)、色相旋转hue-rotate(90deg)、反色filter:invert(1)、透明度opacity(.5)、亮度brightness(.5)、对比度contrast(2)、模糊blur(3px)

<p>原图</p>
<img src="test.jpg" />
<p>黑白色filter: grayscale(100%)</p>
<img src="test.jpg" style="filter: grayscale(100%);"/>
<p>褐色filter:sepia(1)</p>
<img src="test.jpg" style="filter:sepia(1);"/>
<p>饱和度saturate(2)</p>
<img src="test.jpg" style="filter:saturate(2);"/>
<p>色相旋转hue-rotate(90deg)</p>
<img src="test.jpg" style="filter:hue-rotate(90deg);"/>
<p>反色filter:invert(1)</p>
<img src="test.jpg" style="filter:invert(1);"/>
<p>透明度opacity(.5)</p>
<img src="test.jpg" style="filter:opacity(.5);"/>
<p>亮度brightness(.5)</p>
<img src="test.jpg" style="filter:brightness(.5);"/>
<p>对比度contrast(2)</p>
<img src="test.jpg" style="filter:contrast(2);"/>
<p>模糊blur(3px)</p>
<img src="test.jpg" style="filter:blur(3px);"/>
<p>阴影drop-shadow(5px 5px 5px #000)</p>
<img src="test.jpg" style="filter:drop-shadow(5px 5px 5px #000);"/>

13.弹性布局  Flex

14.栅格布局 grid

15.多列布局

16.盒模型定义   box-sizing:border-box的时候，边框和padding包含在元素的宽高之内！

box-sizing:content-box的时候，边框和padding不包含在元素的宽高之内！

17.媒体查询 就在监听屏幕尺寸的变化，在不同尺寸的时候显示不同的样式！在做响应式的网站里面，是必不可少的一环！