css3教程

一.CSS3 边框

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

边框属性：

• border-radius 圆角
• box-shadow   阴影
• border-image  边框图片

浏览器支持

属性	浏览器支持
border-radius
box-shadow
border-image

Internet Explorer 9+ 支持 border-radius 和 box-shadow 属性。

1.css3圆角边框

border-radius

div
{
border:2px solid;
border-radius:25px;//圆角半径
-moz-border-radius:25px; /* 老Firefox */
}

效果：

2.css3边框阴影

border-shadow

div
{
width:300px;
height:100px;
background-color:#ff9900;
-moz-box-shadow: 10px 10px 5px #888888; /* 老的 Firefox */
box-shadow: 10px 10px 5px #888888;/*第一个10px为阴影的width 第二个10px为阴影的height 第三个5px为阴影的厚度 最后就是阴影的颜色*/
}

效果：

 3.css3边框图片(对ie不兼容  慎用)

border-image

<pre name="code" class="html">div
{
border-image:url(border.png) 30 30 round;/*第一和第二30只是对原图片的截取位置  最后一个参数：方式（round平铺 stretch拉伸*/

-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 背景

CSS3 包含多个新的背景属性，它们提供了对背景更强大的控制。

背景属性：

• background-size
• background-origin

1.background-size调整背景图片的大小

div
{
background:url(bg_flower.gif);
-moz-background-size:63px 100px; /* 老版本的 Firefox */
background-size:63px 100px;/*第一个63为背景图片的width 第二个100为背景图片的height*/
background-repeat:no-repeat;/*不重复*/
}

2.background-origin背景图片位置

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;//背景图片的位置
}

3.多重背景图片

body
{ 
background-image:url(bg_flower.gif),url(bg_flower_2.gif);
}

4.规定背景绘制范围

background-clip:border-box( or   padding-box or  content-box)

效果图：

三.CSS3 文本效果

text-shadow  阴影效果

word-wrap    可以支持换行

1.css3 文本阴影效果

div{

text-shadow:5px 5px 5px #ff0000;/*水平阴影、垂直阴影、模糊距离，以及阴影的颜色*/

}

效果图：

四.CSS3字体

CSS3 @font-face 规则

有了这个@font-face 后，网页制作字体就不会被限制到了web，web设计师可以使用自己喜欢的字体了，在字体存放到web服务器后，访问的用户会自动下载字体

Firefox、Chrome、Safari 以及 Opera 支持 .ttf (True Type Fonts) 和 .otf (OpenType Fonts) 类型的字体。
Internet Explorer 9+ 支持新的 @font-face 规则，但是仅支持 .eot 类型的字体 (Embedded OpenType)。
注释：Internet Explorer 8 以及更早的版本不支持新的 @font-face 规则。

实例：

@font-face
{
font-family: myFirstFont;/*新定义的字体名称*/
src: url('Sansation_Light.ttf'),/*字体的地址*/
     url('Sansation_Light.eot'); /* IE9+ */
}

div
{
font-family:myFirstFont;
}

五.CSS3 2D转换(transform)

通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。

兼容性：

Internet Explorer 10、Firefox 以及 Opera 支持 transform 属性。
Chrome 和 Safari 需要前缀 -webkit-。
注释：Internet Explorer 9 需要前缀 -ms-。

2D转换方法：

translate(,) //移动，单位像素
rotate() //元素顺时针旋转
scale(,) //缩放 无单位
skew(,) //翻转 单位deg
matrix() //把移动、缩放、转动、拉长和拉伸集合到一起

transform-origin //改变旋转基点  默认是50% 50% 支持3D

实例：

<pre name="code" class="css" style="line-height: 18px;">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: translate(5px,10px);
-ms-transform: translate(5px,10px); /* IE 9 */
-webkit-transform: translate(5px,10px); /* Safari and Chrome */
-o-transform: translate(5px,10px); /* Opera */
-moz-transform: translate(5px,10px); /* Firefox */
}

六.3D转换

兼容性

Internet Explorer 10 和 Firefox 支持 3D 转换。Chrome 和 Safari 需要前缀 -webkit-。Opera 仍然不支持 3D 转换（它只支持 2D 转换）

转换方法：

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

实例：

div
{
transform: rotateX(120deg);
-webkit-transform: rotateX(120deg);	/* Safari 和 Chrome */
-moz-transform: rotateX(120deg);	/* Firefox */
}

七.CSS3过渡(transition)

Internet Explorer 10、Firefox、Chrome 以及 Opera 支持 transition 属性。
Safari 需要前缀 -webkit-。
注释：Internet Explorer 9 以及更早的版本，不支持 transition 属性。
注释：Chrome 25 以及更早的版本，需要前缀 -webkit-。

实例：

<p></p><pre name="code" class="css">div
{
transition: width 2s linear 1s, height 2s linear 1s, transform 2s linear 1s;
-moz-transition: width 2s linear 1s, height 2s linear 1s, -moz-transform 2s linear 1s;
-webkit-transition: width 2s linear 1s, height 2s linear 1s, -webkit-transform 2s linear 1s;
-o-transition: width 2s linear 1s, height 2s linear 1s,-o-transform 2s linear 1s;
}

div:hover{

width:600px;

hieght:200px;

tansform:rotate(180deg);

}

div{

width:300px;

height:100px;

}