目录
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;
}
注意：
可以针对不同屏幕尺寸引入不同的样式表。
语法示例为
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mediatype.css">
@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 的量。
border-image-repeat: stretch|repeat|round|space|initial|inherit;
拉伸|平铺|缩放平铺|扩张平铺|设置为默认值|继承
用到前缀：-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取值有
none|hidden|dotted|dashed|solid|double|groove【3D，后同】|ridge|inset|outset
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子项单独在侧轴（纵轴）方向上的对齐方式。
语法：
align-self: auto|stretch|center|flex-start|flex-end|baseline|initial|inherit;
用到前缀：-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-
3030
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
