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;

}