您当前位置：首页 > web前端 > htmlcss > 你应该知道的几个CSS3技巧

你应该知道的几个CSS3技巧

来源：程序员人生发布时间：2014-02-27 16:28:26 阅读次数：3283次

你们中有许多人可能已经听到过有关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;

阴影效果演示

<!DOCTYPE html><html><head><style type="text/css"></style></head><body><div id="dropShadow"> </div></body></html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.wfuyu.com/' target='_blank'>http://www.wfuyu.com/</a></center>
提示：可修改后代码再运行!

生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生

------分隔线----------------------------

上一篇 从 Google Docs 下载任意格式文档的方法

下一篇 Access数据库技术（50)

分享到:

------分隔线----------------------------

为码而活

积分：4237

15粉丝

7关注

栏目热点