在css3中添加属性时，不同浏览器需要加上相应的前缀，如：-moz-是Firefox的前缀，-webkit-是chrome&&Safari的前缀，-o-是opera浏览器的前缀。才能正常的在相应的浏览器中显示出来。
css3被划分为模块
最重要的模块就是选择器，框模型，背景和边框，文本效果，2D/3D转换，动画，多列布局，用户界面。
css边框：(Firefox、Chrome 以及 Safari 支持所有新的边框属性。)
能创建圆角边框，向矩形添加阴影，使用图片来绘制边框；
border-radius：属性用来创建圆角 只需要给该属性一个像素就可以给边框一个圆角
div{
border：2px solid;
border-radius:25px;
-moz-border-radius:25px;
}
box-shadow:属性用于向方框添加阴影
eg.
div{
box-shadow:10px 10px 5px #888888;
}
border-image:属性，可以用图片来创建边框：
div
{
border-image:url(border.png) 30 30 round;
-moz-border-image:url(border.png) 30 30 round; /* 老的 Firefox */
-webkit-border-image:url(border.png) 30 30 round; /* Safari 和 Chrome */
-o-border-image:url(border.png) 30 30 round; /* Opera */
}
css背景
background-size：规定背景图片的尺寸。
background-origin：规定背景图片的定位区域。背景图片可以放置于 content-box、padding-box 或 border-box 区域。
css3文本效果
text-shadow：向文本添加阴影。
word-warp： 属性允许您允许文本强制文本进行换行 - 即使这意味着会对单词进行拆分；
允许对长单词进行拆分，并换行到下一行：
p {word-wrap:break-word;} css3字体
@font-face
通过 CSS3，web 设计师可以使用他们喜欢的任意字体。
当您您找到或购买到希望使用的字体时，可将该字体文件存放到 web 服务器上，它会在需要时被自动下载到用户的计算机上。
您“自己的”的字体是在 CSS3 @font-face 规则中定义的。
css3 2D转换- translate() 元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数
- rotate() 元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。
- scale() 元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数
- skew() 元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数
- matrix() 把所有 2D 转换方法组合在一起。matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素
rotateX（）元素围绕其 X 轴以给定的度数进行旋转
rotateY（）元素围绕其 Y 轴以给定的度数进行旋转。
参考属性表
转换属性
下面的表格列出了所有的转换属性：
| 属性 | 描述 | CSS |
|---|---|---|
| transform | 向元素应用 2D 或 3D 转换。 | 3 |
| transform-origin | 允许你改变被转换元素的位置。 | 3 |
| transform-style | 规定被嵌套元素如何在 3D 空间中显示。 | 3 |
| perspective | 规定 3D 元素的透视效果。 | 3 |
| perspective-origin | 规定 3D 元素的底部位置。 | 3 |
| backface-visibility | 定义元素在不面对屏幕时是否可见。 | 3 |
2D Transform 方法
| 函数 | 描述 |
|---|---|
| matrix3d(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n) | 定义 3D 转换，使用 16 个值的 4x4 矩阵。 |
| translate3d(x,y,z) | 定义 3D 转化。 |
| translateX(x) | 定义 3D 转化，仅使用用于 X 轴的值。 |
| translateY(y) | 定义 3D 转化，仅使用用于 Y 轴的值。 |
| translateZ(z) | 定义 3D 转化，仅使用用于 Z 轴的值。 |
| scale3d(x,y,z) | 定义 3D 缩放转换。 |
| scaleX(x) | 定义 3D 缩放转换，通过给定一个 X 轴的值。 |
| scaleY(y) | 定义 3D 缩放转换，通过给定一个 Y 轴的值。 |
| scaleZ(z) | 定义 3D 缩放转换，通过给定一个 Z 轴的值。 |
| rotate3d(x,y,z,angle) | 定义 3D 旋转。 |
| rotateX(angle) | 定义沿 X 轴的 3D 旋转。 |
| rotateY(angle) | 定义沿 Y 轴的 3D 旋转。 |
| rotateZ(angle) | 定义沿 Z 轴的 3D 旋转。 |
| perspective(n) | 定义 3D 转换元素的透视视图。 |
就是把变化过程显示出来。
必须规定两项内容：{
规定您希望吧效果添加到哪个css属性上；
规定效果的时长；
}
过渡属性
下面的表格列出了所有的转换属性：
| 属性 | 描述 | CSS |
|---|---|---|
| transition | 简写属性，用于在一个属性中设置四个过渡属性。 | 3 |
| transition-property | 规定应用过渡的 CSS 属性的名称。 | 3 |
| transition-duration | 定义过渡效果花费的时间。默认是 0。 | 3 |
| transition-timing-function | 规定过渡效果的时间曲线。默认是 "ease"。 | 3 |
| transition-delay | 规定过渡效果何时开始。默认是 0。 | 3 |
css3 动画
@keyframes规则
在 @keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。
和过渡属性一样通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：1。规定动画的名称 2.规定动画的时长。
用百分比在显示过程中你所设置的样式。
CSS3 动画属性
下面的表格列出了 @keyframes 规则和所有动画属性：
| 属性 | 描述 | CSS |
|---|---|---|
| @keyframes | 规定动画。 | 3 |
| animation | 所有动画属性的简写属性，除了 animation-play-state 属性。 | 3 |
| animation-name | 规定 @keyframes 动画的名称。 | 3 |
| animation-duration | 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 | 3 |
| animation-timing-function | 规定动画的速度曲线。默认是 "ease"。 | 3 |
| animation-delay | 规定动画何时开始。默认是 0。 | 3 |
| animation-iteration-count | 规定动画被播放的次数。默认是 1。 | 3 |
| animation-direction | 规定动画是否在下一周期逆向地播放。默认是 "normal"。 | 3 |
| animation-play-state | 规定动画是否正在运行或暂停。默认是 "running"。 | 3 |
| animation-fill-mode | 规定对象动画时间之外的状态。 | 3 |
column-count：规定元素应该被分隔的列数
column-gap：规定列之间的间隔
column-rule：设置列之间的宽度、样式和颜色规则。
新的多列属性
下面的表格列出了所有的转换属性：
| 属性 | 描述 | CSS |
|---|---|---|
| column-count | 规定元素应该被分隔的列数。 | 3 |
| column-fill | 规定如何填充列。 | 3 |
| column-gap | 规定列之间的间隔。 | 3 |
| column-rule | 设置所有 column-rule-* 属性的简写属性。 | 3 |
| column-rule-color | 规定列之间规则的颜色。 | 3 |
| column-rule-style | 规定列之间规则的样式。 | 3 |
| column-rule-width | 规定列之间规则的宽度。 | 3 |
| column-span | 规定元素应该横跨的列数。 | 3 |
| column-width | 规定列的宽度。 | 3 |
| columns | 规定设置 column-width 和 column-count 的简写属性。 | 3 |
新的用户界面特性包括重设元素尺寸、盒尺寸以及轮廓等
rasize：规定是否可由用户调整元素尺寸
box-sizing：允许您以确切的方式定义适应某个区域的具体内容。
outline-offset：对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。
区别轮廓和边框：{
轮廓不占用空间；
轮廓可能是非矩形;
}
新的用户界面属性
下面的表格列出了所有的转换属性：
| 属性 | 描述 | CSS |
|---|---|---|
| appearance | 允许您将元素设置为标准用户界面元素的外观 | 3 |
| box-sizing | 允许您以确切的方式定义适应某个区域的具体内容。 | 3 |
| icon | 为创作者提供使用图标化等价物来设置元素样式的能力。 | 3 |
| nav-down | 规定在使用 arrow-down 导航键时向何处导航。 | 3 |
| nav-index | 设置元素的 tab 键控制次序。 | 3 |
| nav-left | 规定在使用 arrow-left 导航键时向何处导航。 | 3 |
| nav-right | 规定在使用 arrow-right 导航键时向何处导航。 | 3 |
| nav-up | 规定在使用 arrow-up 导航键时向何处导航。 | 3 |
| outline-offset | 对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。 | 3 |
| resize | 规定是否可由用户对元素的尺寸进行调整。 | 3 |
600
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
