快速业务通道

CSS教程:与众不同的CSS3技巧

作者 佚名技术 来源 CSS技术 浏览 发布时间 2012-02-25

你们中有许多人可能已经听到过有关CSS3的不少传言,但是我们现在能真正用到的CSS3技巧又有哪些呢?本文,我将向你展示一些与众不同的CSS3技巧,这些技巧在一些主要的浏览器中表现良好(如Firefox,Chrome,Safari,Opera浏览器)。这些效果会在不支持的浏览器中降级渲染(如IE浏览器)。使用浏览器特定的声明,许多提议的CSS3样式都可以马上拿来使用。

CSS Techniques You Should KNow

如果你不知道浏览器的特定声明是什么,你只需要记住它们都是CSS样式属性前与内核提供商有关的特定前缀。因为CSS3目前还没得到全面的支持,所以我们需要使用这些特定声明。具体的形式如下:

  • Mozilla/Firefox/Gecko浏览器的前缀: -moz-
  • Webkit (Safari/Chrome)浏览器的前缀: -webkit-注意:一些Wbkit的前缀只能在Safari下使用,Chrome不支持。)

你可能已经看到了,使用这些声明的有一个缺点,那就是如果我们想在Firefox,Safari和Chrome中都得到CSS3的效果,我们需要使用到上面所有这些前缀。也不用惊讶,IE浏览器不支持CSS3,因此也就不像其他主要浏览器有一个特定的前缀声明。

好了,我们已经讲的够多了,我们马上尝试一下。注意:样式声明去掉这些前缀就是W3标准的实际规范提议。

关于这个页面的Demo(实例)说明

所有这些例子都是在这个页面里面,如果你不能正常查看实例的效果(或者只能查看部分),那说明你正在使用的浏览器并不支持这些CSS3效果

阴影效果

阴影效果接受多个参数值。第一个是阴影的颜色,它还接受另外四个长度(lenght)值,前两的长度值分辨是X(水平)偏移量和Y(垂直)偏移量。接下一个参数是反映模糊度的数值。第四也是最后一个值是用来定义模糊的散布程度。

box-shadow: #333 3px 3px 4px;
-moz-box-shadow: #333 3px 3px 4px;
-webkit-box-shadow: #333 3px 3px 4px;

阴影效果演示

渐变效果

CSS3的渐变样式刚开始很容易让人混淆,尤其-moz-webkit的渐变之间还存在不同。在-moz中,你首先需要定义渐变的方向,然后定义起始和终止的颜色。而-webkit的渐变则稍稍复杂一些,首先你需要定义渐变的类型,然后接下来两个值定义方向,最后两个值定义了渐变的起始颜色和终止颜色。

-moz-linear-gradient(-90deg,#1aa6de,#022147);
-webkit-gradient(linear, left top, left bottom, from(#1aa6de), to(#022147));

:渐变效果演示实例

RGBA颜色模式

RGBA的颜色定义实际用起来没有给人的感觉那么复杂,它接受四个参数值,以此是:红色值,绿色值,蓝色值,以及透明度

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!

分享到: 更多

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD):厦门软件园二期望海路63号701E(东南融通旁) 邮编(ZIP):361008

电话:0592-5908028 传真:0592-5908039 咨询信箱:web@lingzhong.cn 咨询OICQ:173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号