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%,/* 中间渐变颜色 */
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; |
形变
形变 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 全系列浏览器不支持该属性。