一、CSS3简介
CSS3完全向后兼容。
CSS3 模块
CSS3 被划分为模块。
其中最重要的 CSS3 模块包括：
●选择器
●框模型
●背景和边框
●文本效果
●2D/3D 转换
●动画
●多列布局
●用户界面
二、CSS3边框
通过 CSS3，能创建圆角边框，向矩形添加阴影，使用图片来绘制边框 。
复习以下属性：
●border-radius
●box-shadow
●border-image
1. border-radius
border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性。
border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
该属性可为元素添加圆角边框。
语法：
border-radius: 1-4 length|% / 1-4 length|%;
2.box-shadow
box-shadow 属性向框添加一个或多个阴影。
语法：
box-shadow: h-shadow v-shadow blur spread color inset;
注释：box-shadow 向框添加一个或多个阴影。
该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的inset 关键词来规定。省略长度的值是 0。
属性值：
h-shadow ：必需。水平阴影的位置。允许负值。
v-shadow：必需。垂直阴影的位置。允许负值。
blur ：可选。模糊距离。
spread ：可选。阴影的尺寸。
color：可选。阴影的颜色。请参阅 CSS 颜色值。
inset ：可选。将外部阴影 (outset) 改为内部阴影。
向 div 元素添加方框阴影：
div
{
box-shadow: 10px 10px 5px #888888;
}
3.border-image
border-image 属性是一个简写属性，用于设置以下属性：
●border-image-source ：用在边框的图片的路径。
●border-image-slice ：图片边框向内偏移。
●border-image-width：图片边框的宽度。
●border-image-outset：边框图像区域超出边框的量。
●border-image-repeat：图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。
如果省略值，会设置其默认值 none 100% 1 0 stretch。
三、CSS3背景
●background-size：规定背景图片的尺寸。
●background-origin：规定背景图片的定位区域。
●background-clip ：规定背景的绘制区域。
1.background-size 属性
规定背景图像的尺寸。默认auto。
（1）length
设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。
如果只设置一个值，则第二个值会被设置为 “auto”。
（2）percentage
以父元素的百分比来设置背景图像的宽度和高度。
第一个值设置宽度，第二个值设置高度。
如果只设置一个值，则第二个值会被设置为 “auto”。
（3）cover
把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
背景图像的某些部分也许无法显示在背景定位区域中。
（4）contain
把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。
2.background-origin
属性规定 background-position 属性相对于什么位置来定位。
注释：如果背景图像的 background-attachment 属性为 “fixed”，则该属性没有效果。
padding-box ：背景图像相对于内边距框来定位。
border-box ：背景图像相对于边框盒来定位。
content-box ：背景图像相对于内容框来定位。
3.background-clip
background-clip 属性规定背景的绘制区域。
border-box ：背景被裁剪到边框盒。
padding-box ：背景被裁剪到内边距框。
content-box ：背景被裁剪到内容框。
div
{
background-color:yellow;
background-clip:content-box;
}
4.多重背景
实例
为 body 元素设置两幅背景图片：
body
{
background-image:url(bg_flower.gif),url(bg_flower_2.gif);
}
四、文本效果
本章学习属性如下：
●text-shadow：向文本添加阴影。
●word-wrap：允许对长的不可分割的单词进行分割并换行到下一行。
●text-align-last：设置如何对齐最后一行或紧挨着强制换行符之前的行。
●hanging-punctuation：规定标点字符是否位于线框之外。（目前不支持）
●punctuation-trim：规定是否对标点字符进行修剪。（目前不支持）
●text-emphasis：向元素的文本应用重点标记以及重点标记的前景色。（目前不支持）
●text-justify：规定当 text-align 设置为 “justify” 时所使用的对齐方法。（只有IE支持）
●text-outline：规定文本的轮廓。（目前不支持）
●text-overflow：规定当文本溢出包含元素时发生的事情。
●text-wrap：规定文本的换行规则。（目前不支持）
●word-break：规定非中日韩文本的换行规则。
1.CSS3文本阴影
text-shadow 可向文本应用阴影。
规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色。
属性值：
h-shadow： 必需。水平阴影的位置。允许负值。
v-shadow ：必需。垂直阴影的位置。允许负值。
blur：可选。模糊的距离。
color ：可选。阴影的颜色。
2.CSS3 自动换行
（1）word-wrap:允许对长的不可分割的单词或 URL 地址进行分割并换行到下一行。
normal :只在允许的断字点换行（浏览器保持默认处理）。（单词太长的话就可能超出某个区域）
break-word :在长单词或 URL 地址内部进行换行。（强制文本进行换行 ，意味着会对单词进行拆分）
点击此处，查看例子
（2）word-break 属性规定（非中日韩文本）自动换行的处理方法。
normal ：使用浏览器默认的换行规则。
break-all： 允许在单词内换行。
keep-all：只能在半角空格或连字符处换行。
注释：目前 Opera 不支持 word-break 属性。
3.CSS3文本对齐
text-justify 属性规定当 text-align 被设置为 text-align 时的齐行方法。
text-justify 属性值：
auto：默认，浏览器决定齐行算法。
none ：禁用齐行。
inter-word ：增加/减少单词间的间隔。
inter-ideograph： 用表意文本来排齐内容。
inter-cluster： 只对不包含内部单词间隔的内容（比如亚洲语系）进行排齐。
distribute： 类似报纸版面，除了在东亚语系中最后一行是不齐行的。
kashida ：通过拉伸字符来排齐内容。
例如： text-align:justify （任何浏览器） = text-justify:inter-word（IE）
4.CSS3文本溢出
text-overflow 属性规定当文本溢出包含元素时发生的事情。
clip ：默认，修剪文本。
ellipsis ：显示省略符号来代表被修剪的文本。
string ：使用给定的字符串来代表被修剪的文本。
当设置了overflow:hidden;/*内容被修剪且其余内容不显示*/后，text-overflow才可实现。
●white-space:nowrap：设置文本遇到<br>前不换行
五、CSS3字体
使用需要的字体
在新的 @font-face 规则中，您必须首先定义字体的名称（比如 myFirstFont），然后指向该字体文件。
如需为 HTML 元素使用字体，请通过 font-family 属性来引用字体的名称 (myFirstFont)：
<style>
@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot'); /* IE9+ */
//粗体 font-weight:bold;
//等等其他样式
}
div
{
font-family:myFirstFont;
}
</style>
下面的表格列出了能够在 @font-face 规则中定义的所有字体描述符：
| 描述符 | 值 | 描述 |
|---|---|---|
| font-family | name | 必需。规定字体的名称。 |
| src | URL | 必需。 定义字体文件的 URL。 |
| font-stretch | normal、condensed…… | 可选。定义如何拉伸字体。默认是 “normal”。（目前不支持） |
| font-style | normal、italic、oblique | 可选。定义字体的样式。默认是 “normal”。 |
| font-weight | normal、bold、100~900 | 可选。定义字体的粗细。默认是 “normal”。 |
| unicode-range | unicode-range | 可选。定义字体支持的 UNICODE 字符范围。默认是 “U+0-10FFFF”。 |
关于unicode-range的用法，非常实用！
六、CSS3 2D 转换
CSS3 转换能够对元素进行移动、缩放、转动、拉长或拉伸。
转换是使元素改变形状、尺寸和位置的一种效果。
1.transform属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
例如：
transform: rotate(30deg);
2D 转换方法如下：
●translate()
●rotate()
●scale()
●skew()
●matrix()
（1）translate() 方法
通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数：
translate(x,y) //定义 2D 转换，沿着 X 和 Y 轴移动元素。
translateX(n) //定义 2D 转换，沿着 X 轴移动元素。
translateY(n) //定义 2D 转换，沿着 Y 轴移动元素。
例如：
值 translate(50px,100px)`把元素从左侧移动 50 像素，从顶端移动 100 像素。
（2）rotate() 方法
通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。
rotate(angle) //定义 2D 旋转，在参数中规定角度。 deg单位度
例如：
值 rotate(30deg) 把元素顺时针旋转 30 度。
（3）scale() 方法
通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数：
scale(x,y) //定义 2D 缩放转换，改变元素的宽度和高度。
scaleX(n) //定义 2D 缩放转换，改变元素的宽度。
scaleY(n) //定义 2D 缩放转换，改变元素的高度。
例如：
值 scale(2,4) 把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍。
总结：原始scale(1,1) 缩小scale(0~1,0~1) 放大scale(1~n,1~n)
如果x,y是负数，字会变反。
（4）skew() 方法
通过 skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数：
skew(x-angle,y-angle) //定义 2D 倾斜转换，沿着 X 和 Y 轴。
skewX(angle) //定义 2D 倾斜转换，沿着 X 轴。
skewY(angle) //定义 2D 倾斜转换，沿着 Y 轴。
例如：
值 skew(30deg,20deg) 围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度。
（5）matrix() 方法
matrix() 方法把所有 2D 转换方法组合在一起。
matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。
matrix(n,n,n,n,n,n) //定义 2D 转换，使用六个值的矩阵。
例如：
使用 matrix 方法将 div 元素旋转 30 度：
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
2.transform-origin 属性
改变被转换元素的位置。
2D 转换元素能够改变元素 x 和 y 轴。3D 转换元素还能改变其 Z 轴。
transform-origin: x-axis y-axis z-axis;
x-axis：定义视图被置于 X 轴的何处。
可能的值：left、center、right、length、% 。
y-axis：定义视图被置于 Y 轴的何处。
可能的值：top、center/bottom、length、% 。
z-axis ：定义视图被置于 Z 轴的何处。
可能的值：length 。
七、CSS3 3D 转换
使用 3D 转换来对元素进行格式化。
一些 3D 转换方法：
●rotateX()
●rotateY()
1.transform 向元素应用 2D 或 3D 转换。
（1）translate()方法
同2D：
translate3d(x,y,z) 定义 3D 转化。
translateX(x) 定义 3D 转化，仅使用用于 X 轴的值。
translateY(y) 定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z) 定义 3D 转化，仅使用用于 Z 轴的值。
（2）scale()方法
同2D：
scale3d(x,y,z) 定义 3D 缩放转换。
scaleX(x) 定义 3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y) 定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z) 定义 3D 缩放转换，通过给定一个 Z 轴的值。
（3）rotate() 方法
通过 rotate() 方法，元素围绕其指定轴以给定的度数进行旋转。
rotate3d(x,y,z,angle) 定义 3D 旋转。
rotateX(angle) 定义沿 X 轴的 3D 旋转。
rotateY(angle) 定义沿 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿 Z 轴的 3D 旋转。
2.transform-origin 允许你改变被转换元素的位置。
同2D。
3.transform-style 属性（IE不支持）
规定如何在 3D 空间中呈现被嵌套的元素。
flat：子元素将不保留其 3D 位置。
preserve-3d ：子元素将保留其 3D 位置。
注释：该属性必须与 transform 属性一同使用。
4.perspective 属性
定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。
目前浏览器都不支持 perspective 属性。
Chrome 和 Safari 支持替代的 -webkit-perspective 属性。
-webkit-perspective(n) 定义 3D 转换元素的透视视图。
属性值：
number：元素距离视图的距离，以像素计。
none：默认值。与 0 相同。不设置透视。
点击此处，查看例子
5.perspective-origin 属性
定义 3D 元素所基于的 X 轴和 Y 轴。该属性允许您改变 3D 元素的底部位置。
当为元素定义 perspective-origin 属性时，其子元素会获得透视效果，而不是元素本身。
注释：该属性必须与 perspective 属性一同使用，而且只影响 3D 转换元素。
目前浏览器都不支持 perspective-origin 属性。
Chrome 和 Safari 支持替代的 -webkit-perspecitve-origin 属性。
6.backface-visibility 属性
定义当元素不面向屏幕时是否可见。
如果在旋转元素不希望看到其背面时，该属性很有用。
visible: 背面是可见的。
hidden :背面是不可见的。
只有 Internet Explorer 10+ 和 Firefox 支持 backface-visibility 属性。
Opera 15+、Safari 和 Chrome 支持替代的 -webkit-backface-visibility 属性。
八、CSS3 过渡
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
要实现这一点，必须规定两项内容：
●规定您希望把效果添加到哪个 CSS 属性上
●规定效果的时长
1.transition 属性
是一个简写属性，用于设置四个过渡属性：
●transition-property：规定设置过渡效果的 CSS 属性的名称。
●transition-duration：规定完成过渡效果需要多少秒或毫秒。
●transition-timing-function：规定速度效果的速度曲线。
●transition-delay：定义过渡效果何时开始。
注释：请始终设置 transition-duration 属性，否则时长为 0，就不会产生过渡效果。
2.transition-property 属性
规定应用过渡效果的 CSS 属性的名称。（当指定的 CSS 属性改变时，过渡效果将开始）。
提示：过渡效果通常在用户将鼠标指针浮动到元素上时发生。、
none ：没有属性会获得过渡效果。
all：所有属性都将获得过渡效果。
property ： 定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。
object.style.transitionProperty="width,height"
3.transition-duration 属性
规定完成过渡效果需要花费的时间（以秒或毫秒计）。
time :规定完成过渡效果需要花费的时间（以秒或毫秒计）。默认值是 0，意味着不会有效果。
transition-duration: time; //5s
4.transition-timing-function 属性
规定过渡效果的速度曲线。
（1）linear：规定以相同速度开始至结束的过渡效果
（等于 cubic-bezier(0,0,1,1)）。
（2）ease ：规定慢速开始，然后变快，然后慢速结束的过渡效果
（等于cubic-bezier(0.25,0.1,0.25,1)）。
（3）ease-in：规定以慢速开始的过渡效果
（等于 cubic-bezier(0.42,0,1,1)）。
（4）ease-out：规定以慢速结束的过渡效果
（等于 cubic-bezier(0,0,0.58,1)）。
（5）ease-in-out ：规定以慢速开始和结束的过渡效果
（等于 cubic-bezier(0.42,0,0.58,1)）。
（6）cubic-bezier(n,n,n,n)：在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
cubic-bezier贝塞尔曲线函数
5.transition-delay 属性
规定过渡效果何时开始。
transition-delay 值以秒或毫秒计。
object.style.transitionDelay="2s"
九、CSS3 动画
通过 @keyframes 规则，可以创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。
创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。在动画过程中，可以多次改变这套 CSS 样式。
以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。（0% 是动画的开始时间，100% 动画的结束时间。）
为了获得最佳的浏览器支持，应该始终定义 0% 和 100% 选择器。
注释：请使用动画属性来控制动画的外观，同时将动画与选择器绑定。
目前浏览器都不支持 @keyframes 规则。
Firefox 支持替代的 @-moz-keyframes 规则。
Opera 支持替代的 @-o-keyframes 规则。
Safari 和 Chrome 支持替代的 @-webkit-keyframes 规则。
语法：
@keyframes animationname {keyframes-selector {css-styles;}}
属性值：
animationname：必需。定义动画的名称。
keyframes-selector ：必需。动画时长的百分比。
合法的值：
0-100%from、（与 0% 相同）、to（与 100% 相同）
css-styles：必需。一个或多个合法的 CSS 样式属性。
下面详细讲述@keyframes 规则和所有动画属性：
1.@keyframes 规定动画。
2.animation
所有动画属性的简写属性，除了 animation-play-state 属性。
animation 属性是一个简写属性，用于设置六个动画属性：
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
3.animation-name
规定 @keyframes 动画的名称。
keyframename ：规定需要绑定到选择器的 keyframe 的名称。
none： 规定无动画效果（可用于覆盖来自级联的动画）。
4.animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-duration: time;
5.animation-timing-function
规定动画的速度曲线。默认是 “ease”。
速度曲线定义动画从一套 CSS 样式变为另一套所用的时间。
速度曲线用于使变化更为平滑。
属性值和 transition-timing-function 一样，具体看 八、CSS3过渡
6.animation-delay 规定动画何时开始。默认是 0。
animation-delay 属性定义动画何时开始。
animation-delay 值以秒或毫秒计。
提示：允许负值，-2s 使动画马上开始，但跳过 前2 秒进入2秒后的动画。
7.animation-iteration-count
规定动画被播放的次数。默认是 1。
animation-iteration-count: n|infinite（无限次）;
8.animation-direction
规定动画是否在下一周期逆向地播放。默认是 "normal（正常播放）"。
它定义是否应该轮流反向播放动画，如果 animation-direction 值是 “alternate（轮流反向播放）”，则动画会在奇数次数（1、3、5 等等）正常播放，而在偶数次数（2、4、6 等等）向后播放。
点击此处，查看例子
9.animation-play-state
规定动画是否正在运行或暂停。默认是 “running”。
paused ：规定动画已暂停。
running ：规定动画正在播放。
10.animation-fill-mode
规定对象动画时间之外的状态。
none：不改变，默认行为。
forwards：当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
backwards ：在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
both： 向前和向后填充模式都被应用。
十、CSS3 多列
1.column-count 属性
规定元素应该被划分的列数。
number：元素内容将被划分的最佳列数。
auto ：默认，由其他属性决定列数，比如 “column-width”。
2.column-fill 属性（目前不支持）
规定如何填充列（是否进行协调）。
balance：对列进行协调。浏览器应对列长度的差异进行最小化处理。
auto ：按顺序对列进行填充，列长度会各有不同。
3.column-gap 属性
规定列之间的间隔。
length :把列间的间隔设置为指定的长度。
normal:规定列间间隔为一个常规的间隔。W3C 建议的值是 1em。
注释：如果列之间设置了 column-rule，它会在间隔中间显示。
4.column-rule 属性
是一个简写属性，用于设置所有 column-rule-* 属性。
column-rule 属性设置列只觉得宽度、样式和颜色规则。
column-rule-width 设置列之间的宽度规则。
column-rule-style 设置列之间的样式规则。
column-rule-color 设置列之间的颜色规则。
5.column-rule-color 属性
规定列之间的颜色规则。
6.column-rule-style 属性
规定列之间的样式规则。
none：定义没有规则。
hidden：定义隐藏规则。
dotted：定义点状规则。
dashed ：定义虚线规则。
solid ：定义实线规则。
double：定义双线规则。
groove：定义 3D grooved 规则。该效果取决于宽度和颜色值。
ridge ：定义 3D ridged 规则。该效果取决于宽度和颜色值。
inset：定义 3D inset 规则。该效果取决于宽度和颜色值。
outset ：定义 3D outset 规则。该效果取决于宽度和颜色值。
7.column-rule-width 属性
规定列之间的宽度规则。
thin：定义纤细规则。
medium：定义中等规则。
thick：定义宽厚规则。
length：规定规则的宽度。
8.column-span 属性
规定元素应横跨多少列。
1:元素应横跨一列 / all :元素应横跨所有列。
9.column-width 属性
规定列的宽度。
auto 由浏览器决定列宽。
length 规定列的宽度。
10.columns 属性
是一个简写属性，用于设置列宽column-width和列数column-count。
十一、CSS3用户界面
在 CSS3 中，新的用户界面特性包括重设元素尺寸、盒尺寸以及轮廓等。
1.CSS3 Resizing
在 CSS3，resize 属性规定是否可由用户调整元素尺寸。
none：用户无法调整元素的尺寸。
both：用户可调整元素的高度和宽度。
horizontal：用户可调整元素的宽度。
vertical ：用户可调整元素的高度。
注释：如果希望此属性生效，需要设置元素的 overflow 属性，值可以是 auto、hidden 或 scroll。
2.CSS3 Box Sizing
box-sizing 属性允许您以确切的方式定义适应某个区域的具体内容。
content-box ：
宽度和高度分别应用到元素的内容框。
在宽度和高度之外绘制元素的内边距和边框。
border-box ：
为元素设定的宽度和高度决定了元素的边框盒。
就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
inherit： 规定应从父元素继承 box-sizing 属性的值。
3.CSS3 Outline Offset
outline-offset 属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。
轮廓与边框有两点不同：
●轮廓不占用空间
●轮廓可能是非矩形
7945
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
