css3

其中最重要的 CSS3 模块包括：

• 选择器
• 框模型
• 背景和边框
• 文本效果
• 2D/3D 转换
• 动画
• 多列布局
• 用户界面

CSS3 边框

border-radius 属性用于创建圆角：border-radius:25px;    //25px指圆角效果程度

box-shadow 用于向方框添加阴影：box-shadow: 10px 10px 5px #888888;       //前面2个px分别指距离左边、距离上边的尺寸大小，5px是指阴影程度   后面一个元素是阴影颜色。

通过 CSS3 的 border-image 属性，您可以使用图片来创建边框：

1.border-image:url(border.png) 30 30 round;  

2.border-image:url(/i/border.png) 30 30 stretch;   

以上  30 30分别代码上下  、左右 边框向内偏移量。  round与repeated代表平铺，stretch代表拉伸。

CSS3 背景

CSS3 background-size 属性:您能够以像素或百分比规定尺寸。如果以百分比规定尺寸，那么尺寸相对于父元素的宽度和高度。

CSS3 background-origin 属性:background-origin 属性规定背景图片的定位区域。背景图片可以放置于 content-box、padding-box 或 border-box 区域。

background-origin:border-box;   或者  background-origin:content-box;

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

CSS3 文本效果

CSS3 文本阴影

在 CSS3 中，text-shadow 可向文本应用阴影。您能够规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色：

text-shadow: 5px 5px 5px #FF0000;    前面2个5px是距离左、上的边框距离。5px是阴影透明的。后面是颜色。

CSS3 自动换行

单词太长的话就可能无法超出某个区域：p {word-wrap:break-word;}

CSS3 字体

使用您需要的字体

在新的 @font-face 规则中，您必须首先定义字体的名称（比如 myFirstFont），然后指向该字体文件。

如需为 HTML 元素使用字体，请通过 font-family 属性来引用字体的名称 (myFirstFont)：

使用粗体字体

您必须为粗体文本添加另一个包含描述符的 @font-face：

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

《我们可以为相同的字体设置许多 @font-face 规则。具体看w3c代码运行情况，但是可以说同一个字体，不太命名规则，一般先选择第一个》

CSS3 2D 转换

translate() 方法

通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数：

transform: translate(50px,100px);值 translate(50px,100px) 把元素从左侧移动 50 像素，从顶端移动 100 像素。

rotate() 方法

通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。

值 rotate(30deg) 把元素顺时针旋转 30 度。

scale() 方法

通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数：

transform: scale(2,4);值 scale(2,4) 把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍。

skew() 方法

通过 skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数：

transform: skew(30deg,20deg);值 skew(30deg,20deg) 围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度。

matrix() 方法

matrix() 方法把所有 2D 转换方法组合在一起。

matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。

transform:matrix(0.866,0.5,-0.5,0.866,0,0);
matrix( a, b, c, d, e, f );
a 水平缩放
b 水平倾斜
c 垂直倾斜
d 垂直缩放
e 水平移动
f 垂直移动

translateX(n)	定义 2D 转换，沿着 X 轴移动元素。
translateY(n)	定义 2D 转换，沿着 Y 轴移动元素。

scaleX(n)	定义 2D 缩放转换，改变元素的宽度。
scaleY(n)	定义 2D 缩放转换，改变元素的高度。

 

skewX(angle)	定义 2D 倾斜转换，沿着 X 轴。
skewY(angle)	定义 2D 倾斜转换，沿着 Y 轴。

 CSS3 3D 转换

属性	描述	CSS
transform	向元素应用 2D 或 3D 转换。	3
transform-origin	允许你改变被转换元素的位置。	3
transform-style	规定被嵌套元素如何在 3D 空间中显示。	3
perspective	规定 3D 元素的透视效果。	3
perspective-origin	规定 3D 元素的底部位置。	3
backface-visibility	定义元素在不面对屏幕时是否可见。	3

 CSS3 过渡

通过 CSS3，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。

请把鼠标移动到下面的元素上：

transition: width 2s;  //看transition用法。理解width是什么。

如果时长未规定，则不会有过渡效果，因为默认值是 0。

效果开始于指定的 CSS 属性改变值时。CSS 属性改变的典型时间是鼠标指针位于元素上时：

div:hover
{
width:300px;
}

规定当鼠标指针悬浮于 <div> 元素上时：  当指针移出元素时，它会逐渐变回原来的样式。、

下面的表格列出了所有的转换属性：

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

看http://www.w3school.com.cn/css3/css3_transition.asp理解其用法。