软件下载 | 资讯教程 | 最近更新 | 下载排行 | 一键转帖 | 发布投稿
您的位置:最火下载站 > Web前端 > Html/css > 你应该知道的几个CSS3技巧

你应该知道的几个CSS3技巧

你们中有许多人可能已经听到过有关CSS3的不少传言,但是我们现在能真正用到的CSS3技巧又有哪些呢?本文,我将向你展示一些与众不同的CSS3技巧,这些技巧在一些主要的浏览器中表现良好(如FirefoxChromeSafariOpera浏览器)。这些效果会在不支持的浏览器中降级渲染(如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;

阴影效果演示


提示:可修改后代码再运行!

相关阅读
栏目导航
推荐软件