Web基础之CSS3

概述：css3完全向后兼容,不需要改变已有设计。浏览器通常支持 CSS2。
CSS3被划分成模块，【-moz- , -o- , -webkit-】
有：
1）选择器
2）框模型
3）背景：
—>属性：
->：background-size：规定背景图片的尺寸。
->：background-origin： 规定背景图片的定位区域。
->：background-clip： 规定背景的绘制区域。背景图片可以放置于 content-box、padding-box 或 border-box 区域。

div{ #背景图片进行拉伸，使其完成填充内容区域
background:url(bg_flower.gif);
-moz-background-size:40% 100%; /* 老版本的 Firefox */
background-size:40% 100%;
background-repeat:no-repeat;}

div{ #在 content-box 中定位背景图片
background:url(bg_flower.gif);
background-repeat:no-repeat;
background-size:100% 100%;
-webkit-background-origin:content-box; /* Safari */
background-origin:content-box;}

body{  # 多重背景图片，为 body 元素设置两幅背景图片
background-image:url(bg_flower.gif),url(bg_flower_2.gif);}

4）边框：

—>属性：
->： border-radius ：设置所有四个 border-*-radius 属性的简写属性。
->： box-shadow ：向方框添加一个或多个阴影。
->： border-image ：设置所有 border-image-* 属性的简写属性。

div{ #圆角边框
border:2px solid;
border-radius:25px;
-moz-border-radius:25px; /* Old Firefox */}

div{ #方框阴影
box-shadow: 10px 10px 5px #888888;}

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 */}

5）文本效果：

—>属性：
->：hanging-punctuation：规定标点字符是否位于线框之外。
->：punctuation-trim： 规定是否对标点字符进行修剪。
->：text-align-last：设置如何对齐最后一行或紧挨着强制换行符之前的行。
->：text-emphasis：向元素的文本应用重点标记以及重点标记的前景色。
->：text-justify：规定当 text-align 设置为 “justify” 时所使用的对齐方法。
->：text-outline：规定文本的轮廓。
->：text-overflow： 规定当文本溢出包含元素时发生的事情。
->：text-shadow： 向文本添加阴影。
->：text-wrap：规定文本的换行规则。
->：word-break： 规定非中日韩文本的换行规则。
->：word-wrap： 允许对长的不可分割的单词进行分割并换行到下一行。
—>字体：可将使用的字体文件存放到 web 服务器上，它会在需要时被自动下载到用户的计算机上。您“自己的”的字体是在 CSS3 @font-face 规则中定义的。
->使用：新的 @font-face 规则中，您必须首先定义字体的名称（比如 myFirstFont），然后指向该字体文件。

@font-face{ #粗体字体
font-family: myFirstFont;
src: url('Sansation_Bold.ttf'),
     url('Sansation_Bold.eot'); /* IE9+ */
font-weight:bold;}

->CSS3字体描述符：

 > font-family：name，必需。规定字体的名称。
 > src：url,必需。定义字体文件的 URL。
 >font-stretch：normal,可选。定义如何拉伸字体。默认是 "normal"。
 >font-style：ormal,可选。定义字体的样式。默认是 "normal"。
 >font-weight：bold,可选。定义字体的粗细。默认是 "normal"。
 >unicode-range：可选。定义字体支持的 UNICODE 字符范围。默认是 "U+0-10FFFF"。

6）2D/3D效果：
—>转换属性：
->：transform：向元素应用 2D 或 3D 转换。
->：transform-origin：允许你改变被转换元素的位置。
->：transform-style：规定被嵌套元素如何在 3D 空间中显示。
->：perspective：规定 3D 元素的透视效果。
->：perspective-origin：规定 3D 元素的底部位置。
->：backface-visibility：定义元素在不面对屏幕时是否可见。
—>2D转换方法：
->：translate()：元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标）
->：rotate()：元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。
->：scale()：元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）
->：skew()：元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）
->：matrix()：把所有 2D 转换方法组合在一起，需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。

div{ #移动
transform: translate(50px,100px);
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari and Chrome */
-o-transform: translate(50px,100px); /* Opera */
-moz-transform: translate(50px,100px); /* Firefox */}

div{ #旋转
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
-o-transform: rotate(30deg); /* Opera */
-moz-transform: rotate(30deg); /* Firefox */}

div{ #缩放
transform: scale(2,4);
-ms-transform: scale(2,4); /* IE 9 */
-webkit-transform: scale(2,4); /* Safari 和 Chrome */
-o-transform: scale(2,4); /* Opera */
-moz-transform: scale(2,4); /* Firefox */}

div{ # 翻转
transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg); /* IE 9 */
-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
-o-transform: skew(30deg,20deg); /* Opera */
-moz-transform: skew(30deg,20deg); /* Firefox */}

div{ #使用matrix方法将div旋转30度
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
-moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Firefox */
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
-o-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Opera */}

—>3D转换方法：Chrome 和 Safari 需要前缀 -webkit-。Opera不支持
case>: rotateX/Y/Z()：
case>: rotate3d(x,y,z,angle):元素围绕其 X/Y/Z 轴以给定的度数进行旋转。
case>: translateX/Y/Z()：
case>: translate3d(x,y,z)：元素以其 X/Y/Z 轴以给定的值移动。
case>: scaleX/Y/Z():
case>: scale3d(x,y,z)：元素以其 X/Y/Z 轴以给定的值缩放。
case>: matrix3d(n…n)：定义 3D 转换，使用 16 个值的 4x4 矩阵。
case>: perspective(n)：定义 3D 转换元素的透视视图
7）过渡：是元素从一种样式逐渐改变为另一种的效果。
*必须规定两项内容：
规定您希望把效果添加到哪个 CSS 属性上
规定效果的时长
—>属性：
->：transition：简写属性，用于在一个属性中设置四个过渡属性。
->：transition-property： 规定应用过渡的 CSS 属性的名称。
->：transition-duration：定义过渡效果花费的时间。默认是 0。
->：transition-timing-function： 规定过渡效果的时间曲线。默认是 “ease”。
->：transition-delay： 规定过渡效果何时开始。默认是 0。

div{
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
/* Firefox 4 */
-moz-transition-property:width;
-moz-transition-duration:1s;
-moz-transition-timing-function:linear;
-moz-transition-delay:2s;
/* Safari 和 Chrome */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
/* Opera */
-o-transition-property:width;
-o-transition-duration:1s;
-o-transition-timing-function:linear;
-o-transition-delay:2s;}
/* 使用简写方式 */
div{
transition: width 1s linear 2s;
/* Firefox 4 */
-moz-transition:width 1s linear 2s;
/* Safari and Chrome */
-webkit-transition:width 1s linear 2s;
/* Opera */
-o-transition:width 1s linear 2s;}

8）动画：@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。IE9之前的版本不支持

@keyframes myfirst{
from {background: red;}
to {background: yellow;}}
@-moz-keyframes / @-webkit-keyframes / @-o-keyframes myfirst /* Firefox */{
from {background: red;}
to {background: yellow;}}

from表示0%，动画的开始，to表示100%动画的结束，也可支持使用%:

@keyframes myfirst{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}}

—>绑定到选择器：规定动画的名称、时长

div{
animation: myfirst 5s;
-moz-animation: myfirst 5s; /* Firefox */
-webkit-animation: myfirst 5s; /* Safari 和 Chrome */
-o-animation: myfirst 5s; /* Opera */}

—>animation属性：

->：@keyframes：规定动画。
->：animation：所有动画属性的简写属性，除了 animation-play-state 属性
->：animation-name：规定 @keyframes 动画的名称。
->：animation-duration：规定动画完成一个周期所花费的秒或毫秒。默认是 0。
->：animation-timing-function：规定动画的速度曲线。默认是 “ease”。
->：animation-delay：规定动画何时开始。默认是 0。
->：animation-iteration-count：规定动画被播放的次数。默认是 1。
->：animation-direction：规定动画是否在下一周期逆向地播放。默认是 “normal”。
->：animation-play-state：规定动画是否正在运行或暂停。默认是 “running”。
->：animation-fill-mode：规定对象动画时间之外的状态。
9）多列布局
—>属性：-moz- -webkit- -o-
->：column-count：规定元素应该被分隔的列数。
->：column-fill：规定如何填充列。
->：column-gap：规定列之间的间隔。
->：column-rule：设置所有 column-rule-* 属性的简写属性。
->：column-rule-color：规定列之间规则的颜色。
->：column-rule-style：规定列之间规则的样式。
->：column-rule-width：规定列之间规则的宽度。
->：column-span：规定元素应该横跨的列数。
->：column-width：规定列的宽度。
->：columns：规定设置 column-width 和 column-count 的简写属性。
10）用户界面：包括元素尺寸、盒尺寸及轮廓等
—>属性：-moz- -webkit- -o-
->：appearance：允许将元素设置为标准用户界面元素的外观
->：box-sizing：允许以确切的方式定义适应某个区域的具体内容。
->：icon：为创作者提供使用图标化等价物来设置元素样式的能力。
->：nav-down：规定在使用 arrow-down 导航键时向何处导航。
->：nav-up：规定在使用 arrow-up 导航键时向何处导航。
->：nav-index：设置元素的 tab 键控制次序。
->：nav-left：规定在使用 arrow-left 导航键时向何处导航。
->：nav-right： 规定在使用 arrow-right 导航键时向何处导航。
->：outline-offset：对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。轮廓不占用空间；轮廓可能是非矩形
->：resize：规定是否可由用户对元素的尺寸进行调整。

div{ #规定 div 元素可由用户调整大小
resize:both;
overflow:auto;}
div{ # 两个并排的带边框方框
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:50%;
float:left;}
div{#规定边框边缘之外 15 像素处的轮廓
border:2px solid black;
outline:2px solid red;
outline-offset:15px;
}

博客地址：Web基础之CSS3