首页 > web前端 > css教程 > 正文

css3的一些新特性

高洛峰
发布: 2016-11-24 11:08:24
原创
1650人浏览过

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 全系列浏览器不支持该属性。

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号