CSS3新特性（摘要）

CSS3 简介

CSS3规则

@media

@font-face

@keyframes

CSS3 函数

rgba

linear-gradient

repeating-linear-gradient

radial-gradient

repeating-radial-gradient

CSS3 边框

border-radius

border-image

CSS3 背景

background-image

background-size

background-origin

background-clip

CSS3 文本

text-shadow

text-overflow

word-break

word-wrap

CSS3 2D/3D转换

transform

transform-origin

transform-style

perspective-origin

backface-visibility

CSS3 过渡

transition

CSS3 动画

animation

animation-play-state

CSS3 多列

column-count

column-grap

column-rule

column-width

CSS3 盒子

box-sizing

box-shadow

flex

flex-flow

align-items

align-self

align-content

justify-content

order

css用于控制网页的样式和布局，css3是css2的升级版本，css3语言开发是朝着模块化发展的。

在编写css3样式时，不同的浏览器可能需要添加不同的前缀，这是因为有些css3属性尚未成为W3C标准时，一些浏览器就已经对一些css3属性进行了私有化属性实现。为了更好地向前兼容，一些必要的浏览器前缀还是可以加上的。

前缀	浏览器
-webkit-	Chrome,Safari
-moz-	Firefox
-ms-	IE
-o-	Opera

因为一些旧版本浏览器并不支持CSS3新特性，所以在开发前端页面时，有如下两种基本开发理念可供选择。

1.渐进增强：先实现所有浏览器基本都支持的功能，然后添加一些只有新式浏览器才支持的展示效果功能。

2.优雅降级:一开始就针对新式浏览器实现所有的功能，然后针对低版本浏览器做一些必要的兼容工作。

渐进增强示例代码：

.trans_1{-webkit-transition: all .6s;-moz-transition: all .6s;-o-transition: all .6s;transition: all .6s;
}

优雅降级示例代码：

.trans_1{ transition: all .6s;-o-transition: all .6s;-moz-transition: all .6s;-webkit-transition: all .6s;
}

CSS3规则

@media

作用：针对不同的屏幕尺寸设置不同的样式。

语法：

@media mediatype and|not|only (media feature) {

CSS-Code;

}

注意：

可以针对不同屏幕尺寸引入不同的样式表。

语法示例为

@font-face

作用：从网上下载并使用自规定字体，使页面显示字体不依赖用户的操作系统字体环境。

可在@font-face规则规定：

font-family 必需。规定字体的名称。

src 必需。规定字体文件的 URL。

font-stretch 可选。规定如何拉伸字体。默认值是 "normal"。

font-style 可选。规定字体的样式。默认值是 "normal"。

font-weight 可选。规定字体的粗细。默认值是 "normal"。

unicode-range 可选。规定字体支持的 UNICODE 字符范围。

代码示例：

@font-face{font-family: serverFont; /* 可以给引入的字体文件自规定名字 */src: url(***.woff);font-weight:bold;}

注意：

引入的字体应该是被授权使用的，以避免侵权。

@keyframes

作用：创建动画，将一套 CSS 样式逐渐变化为另一套样式。

语法：

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

参数：

animationname 必需。规定动画的名称。

keyframes-selector 必需。动画时长的百分比。

值为0-100%|from【=0%】|to【=100%】

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

用到前缀：-webkit-、-moz-、-o-

注意：

前缀是加在@和keyframes之间，如 @-webkit-keyframes。

CSS3 函数

rgba

作用：使用红(R)、绿(G)、蓝(B)、透明度(A)的叠加来生成各式各样的颜色。

语法：

rgba(red, green, blue, alpha)

注意：

红(R)、绿(G)、蓝(B)取值是0至255的整数，透明度(A)取值是0到1。

alpha为0表示完全透明，为1表示完全不透明。

linear-gradient

作用：用线性渐变创建 "图像"。

语法：

linear-gradient(direction|angle, color-stop1, color-stop2, ...);

用到前缀：-webkit-、-moz-、-o-

注意：

direction的值建议用角度（单位deg，可按原点和二维直角坐标系来理解，0deg表示从下到上，45deg表示从左下角到右上角，90deg表示从左到右，180deg表示从上到下，-90deg表示从右到左）来表示，如果用top\left\bottom\right则不同浏览器前缀的该属性值设置不一定一样。

color-stop1,color-stop2,...参数由颜色值（可用rgba函数表示）和渲染的停止位置（数值+单位，百分比）组成，且color-stop2的停止位置不应该比color-stop1的停止位置小，依次类推。停止位置可省略。

repeating-linear-gradient

作用：创建重复的线性渐变 "图像"。

语法：

repeating-linear-gradient(direction|angle,color-stop1,color-stop2, ...);

用到前缀：-webkit-、-moz-、-o-

radial-gradient

作用：用径向渐变创建 "图像"。

语法：

radial-gradient(shape size at position,start-color,..., last-color);

参数：

shape：规定圆的类型，值为ellipse（椭圆，默认）|circle（圆）。

size: 规定渐变的大小，默认值为farthest-corner (最远的角落)。

position：规定渐变的位置，值为 center(默认)|top|bottom。

start-color, ..., last-color：用于指定渐变的起止颜色。

可以使用长度值或百分比来指定起止色位置。

用到前缀：-webkit-、-moz-、-o-

repeating-radial-gradient

作用：创建重复的径向渐变 "图像"。

语法：

repeating-radial-gradient(shape size at position, start-color, ..., last-color);

用到前缀：-webkit-、-moz-、-o-

CSS3 边框

border-radius

作用：设置边框圆角。

语法：

border-radius: 1-4 length|% / 1-4 length|%;

拆分：

border-top-left-radius

border-top-right-radius

border-bottom-right-radius

border-bottom-left-radius

用到前缀：-webkit-、-moz-

注意：

border-radius四个值分别对应：上左角，上右角，下右角，下左角。

border-radius三个值分别对应：上左角，上右角和下左角，下右角。

border-radius 两个值分别对应：上左角和下右角，上右角和下左角。

border-radius 一个值对应四个角。

border-image

作用：设置图像边框。

语法：

border-image: source slice width outset repeat;

拆分：

border-image-source: none|image【指定要使用的图像】;

border-image-slice: number|%|fill【保留图像的中间部分】;

指定图像的边界向内偏移。

border-image-width: number|%|auto;

border-image-outset: length|number;

指定在边框外部绘制 border-image-area 的量。

拉伸|平铺|缩放平铺|扩张平铺|设置为默认值|继承

用到前缀：-webkit-、-moz-、-o-

CSS3 背景

background-image

作用：可设置多张背景图片。

语法：

background-image：<bg-image> [ , <bg-image> ]*

参数：

<bg-image> = none | <url> |

<linear-gradient> 【使用线性渐变创建背景图像】|

<radial-gradient> 【径向(放射性)渐变】|

<repeating-linear-gradient> 【重复的线性渐变】|

<repeating-radial-gradient> 【重复的径向(放射性)渐变】

注意：

background属性是所有 background-* 属性的简写属性。因此css3中 background可以用逗号,分隔多个背景图像的设置。

background-size

作用：规定背景图像的尺寸。

语法：

background-size: length【两个值(宽度、高度)|一个值(宽度、auto)】|

percentage【父元素的百分比，值数为2,1解析同上】|

cover【保持宽高比扩张到完全覆盖】|

contain【保持宽高比扩张到最大覆盖大小】;

用到前缀：-webkit-、-moz-、-o-

background-origin

作用：规定 background-position 属性相对于什么位置来定位。

语法：

background-origin: padding-box【背景图像相对于内边距框来定位】|

border-box【边框盒】|

content-box【内容框】;

注意：

如果背景图像的 background-attachment 属性为 "fixed"，则该属性没有效果。

background-clip

作用：指定背景绘制区域。

语法：

background-clip: border-box|padding-box|content-box;

用到前缀：-webkit-、-moz-、-o-

CSS3 文本

text-shadow

作用：给文本创建阴影。

语法：

text-shadow: h-shadow【水平，可为负数】 v-shadow blur color;

注意：

此属性有继承性。

text-overflow

作用：指定当文本溢出包含它的元素时，该如何显示。

语法：

text-overflow: clip【裁剪】|ellipsis【省略号】|string【指定文本】;

用到前缀：-o-

word-break

作用：指定非CJK(中日韩)脚本的断行规则。

语法：

word-break: normal|break-all【单词内】|keep-all【半角空格或连字符】;

word-wrap

作用：允许长的内容可以自动换行

语法：

word-wrap: normal|break-word【在长单词或者URL地址内部进行换行】;

补充：

white-space 是一个css1，css2属性，用于设置如何处理元素内的空白。

white-space :normal;默认，空白会被浏览器忽略。

:pre;空白会被保留，其功能类似HTML中的<pre>标签。

:nowrap;文本不换行，直到遇到<br />标签。

:pre-line;合并空白符序列，正常换行。css2.1新增。

:pre-wrap;保留空白符序列，正常换行。css2.1新增。

:inherit;继承父元素该属性的值。

CSS3 2D/3D转换

transform

作用：对元素进行2D或3D转换。

语法：

transform: none【不进行转换】|transform-functions;

参数：

transform-functions中包含的函数有：

matrix(n,n,n,n,n,n) 规定 2D 转换，使用六个值的矩阵。

matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 规定 3D 转换，使用 16 个值的 4x4 矩阵。

translate(x,y) 规定 2D 转换。

translate3d(x,y,z) 规定 3D 转换。

scale(x[,y]?) 规定 2D 缩放转换。

scale3d(x,y,z) 规定 3D 缩放转换。

rotate(angle) 规定 2D 旋转，在参数中规定角度。

rotate3d(x,y,z,angle)规定 3D 旋转。

skew(x-angle,y-angle)规定沿着 X 和 Y 轴的 2D 倾斜转换。

perspective(n) 为 3D 转换元素规定透视视图。

用到前缀：（2D）-webkit-、-moz-、-ms-、-o-

（3D）-webkit-、-moz-

注意：

translateX(x),translateY(y),translateZ(z),scaleX(x),scaleY(y),scaleZ(z),rotateX(angle),rotateY(angle),rotateZ(angle),skewX(angle),skewY(angle)是针对具体的X/Y/Z轴进行变换的。

transform-origin

作用：更改转换元素的位置。

语法：

transform-origin: x-axis y-axis z-axis;

参数：

x-axis 规定视图在X轴的位置，值为left|center|right|length|%。

y-axis 规定视图在Y轴的位置，值为left|center|right|length|%。

z-axis 规定视图在Z轴的位置，值为length。

用到前缀：（2D）-webkit-、-moz-、-ms-、-o-

（3D）-webkit-、-moz-

注意：

参数x-axis、y-axis 的默认值为50%，z-axis的默认值为0。

transform-style

作用：指定嵌套元素如何在三维空间中呈现。

语法：

transform-style: flat【子元素不保留其3D位置】|preserve-3d【保留】;

用到前缀：-webkit-、-moz-

perspective-origin

作用：规定 3D 元素所基于的 X 轴和 Y 轴，允许改变 3D 元素的底部位置。

语法：

perspective-origin: x-axis y-axis;

参数：

x-axis 规定视图在X轴的位置，值为left|center|right|length|%。

y-axis 规定视图在Y轴的位置，值为left|center|right|length|%。

用到前缀：-webkit-、-moz-

注意：

参数x-axis、y-axis 的默认值为50%。

backface-visibility

作用：规定当元素不面向屏幕时是否可见。

语法：

backface-visibility: visible|hidden;

用到前缀：-webkit-、-moz-

CSS3 过渡

transition

作用：设置元素当过渡效果。

语法：

transition: property duration timing-function delay;

拆分：

transition-property 规定设置过渡效果的 CSS 属性的名称。

值为

none|all【所有属性获得过渡效果】| property【指定属性】;

transition-duration 过渡时长【默认0，单位为秒或者毫秒】

transition-timing-function 规定速度效果的速度曲线。

值为

linear【匀速】|ease【慢快慢】|ease-in【以慢速开始】|

ease-out【以慢速结束】|ease-in-out【以慢速开始和结束】|

cubic-bezier(n,n,n,n)【贝塞尔曲线，n为0和1及之间的数值】

transition-delay 延迟开始时长【默认0，单位为秒或者毫秒】

用到前缀：-webkit-、-moz-、-o-

注意：使用transition属性时需要设置transition-duration,否则过渡时间会被设为0，不会展现出过渡效果。

CSS3 动画

animation

作用：实现动画效果。

语法：

animation: name duration timing-function delay iteration-count direction;

拆分：

animation-name 规定绑定到@keyframes的动画名称。

animation-duration 规定动画时长，默认为0，单位为秒或毫秒。

animation-timing-function规定动画的速度曲线。

animation-delay 规定在动画开始之前的延迟时长。

animation-iteration-count规定动画播放次数，默认为1。infinte表无限。

animation-direction 规定是否应该轮流反向播放动画。

值为

normal【正向】|reverse【反向】|

alternate【奇正偶反】|

alternate-reverse【奇反偶正】;

用到前缀：-webkit-、-moz-、-o-

animation-play-state

作用：设置运行或暂停动画。

语法：

animation-play-state: running【运行】|paused【暂停】;

用到前缀：-webkit-、-moz-、-o-

注意：

可在javascript里设置该属性值，以控制动画效果。

CSS3 多列

column-count

作用：规定元素应该被划分的列数。

语法：

column-count: auto|number;

用到前缀：-webkit-、-moz-

column-grap

作用：指定列之间的间距。

语法：

column-gap: normal|length;

用到前缀：-webkit-、-moz-

column-rule

作用：指定列之间的宽度，分隔线样式和颜色。

语法：

column-rule: column-rule-width column-rule-style column-rule-color;

用到前缀：-webkit-、-moz-

注意：

column-rule-style取值有

column-width

作用：规定列的宽度。

语法：

column-width: auto|length;

用到前缀：-webkit-、-moz-

CSS3 盒子

box-sizing

作用：规定如何计算一个元素的总宽度和总高度。

语法：

box-sizing: content-box|border-box|inherit:

用到前缀：-webkit-、-moz-

注意：

box-sizing值为content-box时

width + padding + border = 元素实际宽度

height + padding + border = 元素实际高度

box-sizing值为border-box时

width = 元素内容宽度 + padding + border

height = 元素内容高度 + padding + border

box-shadow

作用：向框添加一个或多个阴影。

语法：

box-shadow: h-shadow【*】 v-shadow【*】 blur spread color inset;

用到前缀：-webkit-、-moz-、-o-

注意：

参数中blur表示模糊距离，spread表示阴影尺寸，inset表示内阴影。

flex

作用：设置或检索弹性盒模型对象的子元素如何分配空间。

语法：

flex: flex-grow flex-shrink flex-basis |auto|initial|inherit;

参数值：

auto 与 1 1 auto 相同。

none 与 0 0 auto 相同。

initial 即 0 1 auto 默认值。

inherit 从父元素继承该属性。

拆分：

flex-grow 默认为0，规定项目将相对于其他灵活的项目进行扩展的量。

flex-shrink 默认为1，规定项目将相对于其他灵活的项目进行收缩的量。

flex-basis 项目的长度。值为auto|length|initial|inherit

用到前缀：-webkit-、-moz-、-ms-

注意：

flex-shrink仅在flex元素内各个子元素宽度之和大于flex元素宽度时才会生效收缩，flex-shrink分配的是缩减的差量给flex元素里的各个子元素。

语法中的|auto|initial|inherit应该理解为flex的取值，而非flex-basis的取值。

flex-flow

作用：用于设置或检索弹性盒模型对象的子元素排列方式。

语法：

flex-flow: flex-direction flex-wrap |initial|inherit;

拆分：

flex-direction 规定灵活项目的方向，有效的取值为

row【默认，水平方向】|row-reverse【水平反方向】|

column【竖直方向】|column-reverse【竖直反方向】|

initial|inherit

flex-wrap 规定flex容器是单行还是多行，有效的取值为

nowrap|wrap|wrap-reverse【反序拆】|initial|inherit

用到前缀：-webkit-、-moz-、-ms-

align-items

作用：设置flex元素的对齐方式。

语法：

align-items: stretch【默认，拉伸】|center【中心元素在容器内】|

flex-start【容器开头】| flex-end【容器末端】|

baseline【容器基线】|initial|inherit;

用到前缀：-webkit-

align-self

作用：规定flex子项单独在侧轴（纵轴）方向上的对齐方式。

语法：

用到前缀：-webkit-

注意：

语法中auto值为默认值，含意是继承父容器的align-items值，若没有父容器则值为“stretch”。

每个flex对象元素的align-self属性可重写align-items属性。

align-content

作用：设置flex盒子内部各个子元素垂直方向上占用空间的方式。

语法：

align-content: stretch|center|flex-start|flex-end|

space-between【中间空】|space-around【上下空】|

initial|inherit;

用到前缀：-webkit-

注意：

如果flex盒子的宽度大于内部各个子元素的宽度，那么会出现子元素优先并排组合成行，再垂直方向上分配空间。

justify-content

作用：设置flex盒子内部各个子元素水平方向上占用空间的方式。

语法：

justify-content: flex-start【默认，容器开头】|flex-end|center|

space-between【中间空】|space-around【左右空】|

initial|inherit;

用到前缀：-webkit-、-moz-

order

作用：设置弹性盒模型对象的子元素出现的順序。

语法：

order: number【默认为0】|initial|inherit;

用到前缀：-webkit-、-moz-