css3新特性详解

1.css3实现边框圆角 border-radius

如果你在 border-radius 属性中只指定一个值，那么将生成 4 个 圆角。
但是，如果你要在四个角上一一指定，可以使用以下规则：
1.四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
border-radius: 15px 50px 30px 5px
2.三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
border-radius: 15px 50px 30px
3.两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
border-radius: 15px 50px 30px
4.一个值： 四个圆角值相同
border-radius:10px

2.盒子阴影 box-shadow

参数	描述
h-shadow	水平阴影的位置
v-shadow	垂直阴影的位置
blur	模糊距离
spread	阴影大小
color	阴影颜色
inset	可选，从外层的阴影（开始时）改变阴影内侧阴影

语法

box-shadow: h-shadow v-shadow blur spread color inset;

3.文本阴影 - text-shadow

语法

box-shadow: h-shadow v-shadow blur color ;

4.css3渐变(gradient)

用法:

线性渐变:
 linear-gradient 
 background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
径向渐变    
background-image: radial-gradient(shape size at position, start-color, ..., last-color);  
重复的径向渐变
background-image: repeating-radial-gradient(red, yellow 10%, green 15%);

5.transfrom 转换

值	描述
none	定义不进行转换
translate(x,y)	定义 2D 转换
translate3d(x,y,z)	定义 3D 转换。
translateX(x)	定义转换，只是用 X 轴的值。
translateY(y)	定义转换，只是用 Y 轴的值。
translateZ(z)	定义 3D 转换，只是用 Z 轴的值。
scale(x[,y]?)	定义 2D 缩放转换。
scale3d(x,y,z)	定义 3D 缩放转换。
scaleX(x)	通过设置 X 轴的值来定义缩放转换。
scaleY(y)	通过设置 Y 轴的值来定义缩放转换。
scaleZ(z)	通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle)	定义 2D 旋转，在参数中规定角度。
rotate3d(x,y,z,angle)	定义 3D 旋转。
rotateX(angle)	定义沿着 X 轴的 3D 旋转。
rotateY(angle)	定义沿着 Y 轴的 3D 旋转。
rotateZ(angle)	定义沿着 Z 轴的 3D 旋转。
skew(x-angle,y-angle)	定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle)	定义沿着 X 轴的 2D 倾斜转换。
skewY(angle)	定义沿着 Y 轴的 2D 倾斜转换。
perspective(n)	为 3D 转换元素定义透视视图。

6.新增的伪类选择器

:not(选择器)  除了选中的选择器以外其他选择器都采用设置的样式
:empty  选择每个没有任何子级的元素（包括文本节点)
:root  匹配根元素
::selection选择器匹配元素中被用户选中或处于高亮状态的部分。
:nth-of-type(n)选择器匹配同类型中的第n个同级兄弟元素。
:nth-last-of-type(n)选择器匹配同类型中的倒数第n个同级兄弟元素。
:first-of-type 选择器匹配元素其父级是特定类型的第一个子元素。
:last-of-type选择器匹配元素其父级是特定类型的最后一个子元素。
:only-of-type 代表了任意一个元素，这个元素没有其他相同类型的兄弟元素。
:only-child   匹配属于父元素中唯一子元素的元素。
:nth-child(n) 选择器匹配父元素中的第 n 个子元素，元素类型没有限制。
:nth-last-child(n) 选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。
:disabled控制禁用元素的样式。
:enabled控制激活元素的样式。

7.css新增的动画

CSS3 可以创建动画，它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的效果。

css3动画属性

属性	描述
@keyframes	动画关键帧
animation	所有动画属性的简写属性。
animation-name	规定 @keyframes 动画的名称。
animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function	规定动画的速度曲线。默认是 “ease”。
animation-fill-mode	规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
animation-iteration-count	规定动画被播放的次数。默认是 1。
animation-direction	规定动画是否在下一周期逆向地播放。默认是 “normal”。
animation-play-state	规定动画是否正在运行或暂停。默认是 “running”。

8.css新增的背景属性

属性	描述
background-clip	规定背景的绘制区域。
background-origin	规定背景图片的定位区域。
background-size	规定背景图片的尺寸。

background-clip讲解
background-origin讲解
background-size讲解

9.css3 多列

多列详解