你应该知道的几个CSS3技巧

发布时间：2018-08-30 20:13:19 所属栏目：经验来源：站长网

导读：你们中有许多人可能已经听到过有关CSS3的不少传言，但是我们现在能真正用到的CSS3技巧又有哪些呢？本文，我将向你展示一些与众不同的CSS3技巧，这些技巧在一些主要的浏览器中表现良好（如 Firefox ， Chrome ， Safari ， Opera 浏览器）。这些效果会在不

你们中有许多人可能已经听到过有关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.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：PHP编程网 - 黄冈站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!