css3的一些新特性

background:rgba(254, 255, 200, 0.75); 

例如上面代码所示，前三个参数分别是分别是 R、G、B 三原色，范围是 0-255。第四个参数是背景透明度，范围是 0-1，如 0.5 代表透明度 50%。这个属性使我们在浏览器中也可以做到像 Win7 一样的半透明玻璃效果。

 

css3圆角示例代码

 

/*FireFox 语法 */ 

 -moz-border-radius: 6px 6px 6px  6px; 

 -moz-border-radius-topright: 6px; 

 -moz-border-radius-topleft: 6px; 

 -moz-border-radius-bottomright: 6px; 

 -moz-border-radius-bottomleft: 6px; 

 

 /*WebKit 核心浏览器语法 */ 

 -webkit-border-radius: 6px 6px 6px 6px;

 -webkit-border-top-right-radius: 6px; 

 -webkit-border-top-left-radius: 6px; 

 -webkit-border-bottom-right-radius: 6px; 

 -webkit-border-bottom-left-radius: 6px; 

 

 /*CSS 标准语法 */ 

 border-radius:6px 6px 6px 6px;

 border-top-right-radius: 6px; 

 border-top-left-radius: 6px; 

 border-bottom-right-radius: 6px; 

 border-bottom-left-radius: 6px; 

如上面代码所示，四个角的效果可以通过一行代码 border-radius: 6px 6px 6px 6px来指定，其中四个参数从左到右分别代表：左上角、右上角、右下角、左下角。也可以类似 border-top-right-radius: 6px;这样分别指定每一个角的效果。

 

渐变色

 

background: -moz-linear-gradient(

center top,/* 渐变开始的坐标 */  

rgba(254, 216, 80, 0.75),/* 渐变开始颜色 */

rgba(230, 125, 30, 0.75) 50%,/* 中间渐变颜色 */  www.2cto.com

rgba(254, 235, 121, 0.75)/* 渐变结束颜色 */ ) repeat scroll 0 0 transparent; 

如上面代码所示，Mozilla 采用 -moz-linear-gradient标签表示线性渐变。第一个参数表示渐变开始的坐标，可以是坐标值，也可以是 top、bottom、left、right、center 等值。后面参数是渐变的颜色值，个数不限，之间用逗号隔开。每个颜色值可以是普通的十六进制颜色也可以是 RGBA 颜色值。每个颜色后面还可以跟一个百分比或者 0-1 之间的小数，表示该颜色在整个渐变色中的比例。

 

Webkit渐变色语法

 

 

 background:-webkit-gradient(

linear,/* 渐变类型线性 */

left top,/* 渐变开始的坐标 */

left bottom,/* 渐变结束的坐标 */

from(rgba(254, 216, 80, 0.75)),/* 渐变开始颜色 */

to(rgba(254, 235, 121, 0.75)),/* 渐变结束颜色 */

color-stop(0.5,rgba(230, 125, 30, 0.75))/* 渐变的中间颜色 */

 ) 

 repeat scroll 0 0 transparent; 

Webkit 浏览器使用 -webkit-gradient属性表示渐变。第一个参数是渐变类型，通常是 linear线性渐变。第二个参数是渐变开始的坐标，和 Mozilla 的第一个参数相同。第三个参数是渐变结束的坐标。第四个和第五个分别是渐变开始和结束的颜色，可以是十六进制颜色值，也可以是 RGBA 颜色值。最后的 color-stop属性可以有无数个，在前五个参数的后面以逗号隔开，表示家变中间的渐变颜色。在 color-stop属性中，第一个参数是该渐变色占得比例，可以是 0-1 的一个小数或者是一个百分数；第二个参数是渐变的颜色值同样可以是十六进制的颜色值或者 RGBA 的颜色值。

 

形变

 

形变 Transform 是 CSS 继线性颜色渐变之后的又一枚重磅炸弹，通常使用 CSS 和 HTML 我们是不可能使 HTML 元素旋转或者倾斜一定角度的。为了使元素看起来更具有立体敢，我们不得不把这种效果做成一个图片，这样就限制了很多动态的使用应用场景。Transform 属性的引入使我们以前通常要借助 SVG 等矢量绘图手段才能实现的功能，只需要一个简单的 CSS 属性就能实现。在 CSS3 中 Transform 属性主要包括 rotate 旋转、scale 缩放、translate 坐标平移、skew 坐标倾斜、matrix 矩阵变换。下面我们就来看看每个属性是如何使用的。

 

 

/*Webkit 核心浏览器 */ 

 -webkit-transform: rotate(-90deg); 

 -webkit-transform: scale(2); 

 -webkit-transform: scale(2, 1); 

-webkit-transform: translate(10px, 20px); 

 -webkit-transform: skew(30deg, -10deg); 

 -webkit-transform: matrix(1, -0.2, 0, 1, 0, 0); 

 

 /*Firefox 浏览器 */ 

 -moz-transform: rotate(-90deg); 

-moz-transform: scale(2); 

 -moz-transform: scale(2, 1); 

 -moz-transform: translate(10px, 20px); 

 -moz-transform: skew(30deg, -10deg); 

-moz-transform: matrix(1, -0.2, 0, 1, 0, 0); 

 /*Opera 浏览器 */ 

 -o-transform: rotate(-90deg); 

 -o-transform: scale(2); 

 -o-transform: scale(2, 1); 

 -o-transform: translate(10px, 20px); 

 -o-transform: skew(30deg, -10deg); 

 -o-transform: matrix(1, -0.2, 0, 1, 0, 0); 

 

 

旋转属性代码非常简单，rotate 属性加上旋转角度参数，45deg 代表顺时针方向旋转 45 度。如果是逆时针旋转 45 度则是 -45deg。

 

类似于旋转，缩放属性是由 scale 关键字加上缩放参数实现的。当只有一个参数 2 时表示该 HTML 元素的 X 轴、Y 轴方向同时被放大 2 被，0.5 表示同时缩小一半。如果同时有 2 和 3 两个参数时，表示该 HTML 元素的 X 轴被放大 2 被 Y 轴方向被放大 3 被。

 

坐标平移属性顾名思义，就是将该 HTML 元素向 X、Y 轴方向平移若干像素，由 translate 属性实现。后面两个参数分别表示向 X 轴、Y 轴平移的量。

 

skew 属性也是一个很有用的 transform 功能，它可以将一个对象围绕着 X 和 Y 轴按照一定的角度倾斜。这和 rotate 的旋转不一样，rotate 只是旋转而不会让 HTML 元素的形状改变，而 skew 会让这个 HTML 元素的形状改变。skew 有两个参数，分别代表该 HTML 元素沿 X 和 Y 轴的倾斜度数。

 

Matrix，你没有看错，就是我们通常的矩阵变换。这个变换就是我们在解析几何中学到的坐标系变换。他有六个参数 (a, b, c, d, e, f)，是一个 3 × 3 的矩阵，代表坐标变换的变换矩阵。使用它我们就可以很灵活的完成任意的坐标系变换。有兴趣的朋友话可以查看大学解析几何的课本，或者 W3c 在 SVG 中关于 Matrix 变化的定义和描述。

 

目前支持这 5 中变换转属性的浏览器有 Safari 4+、Chrome 5+、Firefox 3.5+、Opera10.5+，IE 全系列浏览器不支持该属性。