来源：自学PHP网 时间：2015-04-14 14:50 作者： 阅读:次
[导读] background:rgba(254, 255, 200, 0.75);例如上面代码所示，前三个参数分别是分别是 R、G、B 三原色，范围是 0-255。第四个参数是背景透明度，范围是 0-1，如 0.5 代表透明度 50%。这个属性使我们在...
|
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 全系列浏览器不支持该属性。
|
自学PHP网专注网站建设学习,PHP程序学习,平面设计学习，以及操作系统学习
京ICP备14009008号-1@版权所有www.zixuephp.com
网站声明：本站所有视频，教程都由网友上传，站长收集和分享给大家学习使用，如由牵扯版权问题请联系站长邮箱904561283@qq.com
