CSS3感悟1

CSS3 是最新的 CSS 标准。

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

CSS3 被划分为模块。
其中最重要的 CSS3 模块包括：
选择器
框模型
背景和边框
文本效果
2D/3D 转换
动画
多列布局
用户界面

通过 CSS3，您能够创建圆角边框，向矩形添加阴影，使用图片来绘制边框 - 并且不需使用设计软件。

div
{
text-align:center;
border:2px solid #a1a1a1;
padding:10px 40px;
background:#dddddd;
width:350px;
border-radius:15px;
-moz-border-radius:25px; /* 老的 Firefox */
}

在 CSS3 中，box-shadow 用于向方框添加阴影：

div
{
width:300px;
height:100px;
background-color:#ff9900;
-moz-box-shadow: 10px 10px 5px #888888; /* 老的 Firefox */
box-shadow: 10px 10px 5px #888888;
}

值 描述 测试
h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊距离。
spread 可选。阴影的尺寸。
color 可选。阴影的颜色。请参阅 CSS 颜色值。
inset 可选。将外部阴影 (outset) 改为内部阴影。

通过 CSS3 的 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 */
}

CSS3 背景
background-size：属性规定背景图片的尺寸。

在 CSS3 之前，背景图片的尺寸是由图片的实际尺寸决定的。在 CSS3 中，可以规定背景图片的尺寸，这就允许我们在不同的环境中重复使用背景图片。

background-origin：属性规定背景图片的定位区域。
背景图片可以放置于 content-box、padding-box 或 border-box 区域。
div
{
background:url(bg_flower.gif);
background-repeat:no-repeat;
background-size:100% 100%;
-webkit-background-origin:content-box; /* Safari */
background-origin:content-box;
}

CSS3 允许您为元素使用多个背景图像。
body
{
background-image:url(/i/bg_flower.gif),url(/i/bg_flower_2.gif);
}

background-clip：规定背景的绘制区域。
值 描述 测试
border-box 背景被裁剪到边框盒。
padding-box 背景被裁剪到内边距框。
content-box 背景被裁剪到内容框。

CSS3 文本效果：
text-shadow：可向文本应用阴影。
word-wrap：允许您允许文本强制文本进行换行 - 即使这意味着会对单词进行拆分。
值 描述
normal 只在允许的断字点换行（浏览器保持默认处理）。
break-word 在长单词或 URL 地址内部进行换行。

新的文本属性
属性 描述 CSS
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 允许对长的不可分割的单词进行分割并换行到下一行。

CSS3 字体：
在 CSS3 之前，web 设计师必须使用已在用户计算机上安装好的字体。
通过 CSS3，web 设计师可以使用他们喜欢的任意字体。
当您您找到或购买到希望使用的字体时，可将该字体文件存放到 web 服务器上，它会在需要时被自动下载到用户的计算机上。


您“自己的”的字体是在 CSS3 @font-face 规则中定义的。
使用您需要的字体：
在新的 @font-face 规则中，您必须首先定义字体的名称（比如 myFirstFont），然后指向该字体文件。
如需为 HTML 元素使用字体，请通过 font-family 属性来引用字体的名称 (myFirstFont)；

CSS3 转换:transform
通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。
translate((50px,100px)元素从其当前位置移动，根据给定的 left(x 坐标和 top(y 坐标）

rotate(30deg)//元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转

scale(2,4)元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数
把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍。

skew(30deg,20deg)元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数
围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度

matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。
div
{
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 */
}

transform-origin:设置旋转元素的基点位置:
div
{
transform: rotate(45deg);
transform-origin:20% 40%;

-ms-transform: rotate(45deg); /* IE 9 */
-ms-transform-origin:20% 40%; /* IE 9 */

-webkit-transform: rotate(45deg); /* Safari 和 Chrome */
-webkit-transform-origin:20% 40%; /* Safari 和 Chrome */

-moz-transform: rotate(45deg); /* Firefox */
-moz-transform-origin:20% 40%; /* Firefox */

-o-transform: rotate(45deg); /* Opera */
-o-transform-origin:20% 40%; /* Opera */
}

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

3D 转换:
CSS3 允许您使用 3D 转换来对元素进行格式化。
rotateX():元素围绕其 X 轴以给定的度数进行旋转
div
{
transform: rotateX(120deg);
-webkit-transform: rotateX(120deg); /* Safari 和 Chrome */
-moz-transform: rotateX(120deg); /* Firefox */
}

rotateY():元素围绕其 Y 轴以给定的度数进行旋转
div
{
transform: rotateY(130deg);
-webkit-transform: rotateY(130deg); /* Safari 和 Chrome */
-moz-transform: rotateY(130deg); /* Firefox */
}

Chrome 和 Safari 需要前缀 -webkit-。


函数 描述
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 转换元素的透视视图。

CSS3 过渡:
通过 CSS3，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。
div
{
width:100px;
height:100px;
background:yellow;
transition:width 4s, height 4s;
-moz-transition:width 2s, height 2s, -moz-transform 2s; /* Firefox 4 */
-webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari and Chrome */
-o-transition:width 2s, height 2s, -o-transform 2s; /* Opera */
}

div:hover
{
width:200px;
height:200px;
transform:rotate(180deg);
-moz-transform:rotate(180deg); /* Firefox 4 */
-webkit-transform:rotate(180deg); /* Safari and Chrome */
-o-transform:rotate(180deg); /* Opera */
}
向宽度、高度和转换添加过渡效果：
div
{
transition: width 2s, height 2s, transform 2s;
-moz-transition: width 2s, height 2s, -moz-transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
-o-transition: width 2s, height 2s,-o-transform 2s;
}

属性 描述 CSS
transition 简写属性，用于在一个属性中设置四个过渡属性。
transition-property 规定应用过渡的 CSS 属性的名称。
transition-duration 定义过渡效果花费的时间。默认是 0。
transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。
transition-delay 规定过渡效果何时开始。默认是 0。

CSS3 动画
什么是 CSS3 中的动画？
动画是使元素从一种样式逐渐变化为另一种样式的效果。
请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。

属性 描述 CSS
@keyframes 规定动画。 3
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 规定对象动画时间之外的状态。

CSS3 多列
通过 CSS3，您能够创建多个列来对文本进行布局 - 就像报纸那样！
column-count:属性规定元素应该被分隔的列数
column-gap:属性规定列之间的间隔
column-rule:属性设置列之间的宽度、样式和颜色规则

.newspaper
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;

-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari and Chrome */
column-gap:40px;

-moz-column-rule:4px outset #ff0000; /* Firefox */
-webkit-column-rule:4px outset #ff0000; /* Safari and Chrome */
column-rule:4px outset #ff0000;
}

属性 描述 CSS
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 的简写属性。

CSS3 用户界面
resize:属性规定是否可由用户调整元素尺寸
box-sizing:属性允许您以确切的方式定义适应某个区域的具体内容
content-box,border-box,inherit
outline-offset:属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓