CSS教程:与众不同的CSS3技巧
|
你们中有许多人可能已经听到过有关CSS3的不少传言，但是我们现在能真正用到的CSS3技巧又有哪些呢？本文，我将向你展示一些与众不同的CSS3技巧，这些技巧在一些主要的浏览器中表现良好（如Firefox，Chrome，Safari，Opera浏览器）。这些效果会在不支持的浏览器中降级渲染（如IE浏览器）。使用浏览器特定的声明，许多提议的CSS3样式都可以马上拿来使用。
如果你不知道浏览器的特定声明是什么，你只需要记住它们都是CSS样式属性前与内核提供商有关的特定前缀。因为CSS3目前还没得到全面的支持，所以我们需要使用这些特定声明。具体的形式如下：
你可能已经看到了，使用这些声明的有一个缺点，那就是如果我们想在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的渐变则稍稍复杂一些，首先你需要定义渐变的类型，然后接下来两个值定义方向，最后两个值定义了渐变的起始颜色和终止颜色。 -webkit-gradient(linear, left top, left bottom, from(#1aa6de), to(#022147)); :渐变效果演示实例RGBA颜色模式RGBA的颜色定义实际用起来没有给人的感觉那么复杂，它接受四个参数值，以此是：红色值，绿色值，蓝色值，以及透明度 |
凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢! |
