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

【 tulaoshi.com - Web开发 】

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

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

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

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

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

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

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

RGBA的颜色定义实际用起来没有给人的感觉那么复杂，它接受四个参数值，以此是：红色值，绿色值，蓝色值，以及透明度。我们不用hex（#）16进制值的颜色，我们以RGB的模式来设置颜色，其中，透明度可以设置颜色的透明效果。透明度的取值范围在0到1之间，0是完全不透明，1是颜色完全透明。下面这些演示例子的透明度都是0.5，元素的透明度是50%，rgba不需要附加任何特定的浏览器前缀声明。

除了RGBA，CSS3也支持HSL颜色模式。这给我们在颜色和色调的选择上提供了充足的余地。在HSL这种色彩模式中的H代表色调，S代表色度，L代表亮度。色调是色盘上角度值  ，而保饱和度和亮度则是颜色的百分比值。

要使用这一CSS样式，你需要分别定义, , , 和 才能获得下面的效果。你注意到定义一个8像素的边框，然后边框又定义了8种不同的颜色。这因为边框的颜色数量必须与边框的像素宽度值相对应。

我不得不要说文本选择颜色的定义是一个相当激动人心的新功能。当我第一次在CSS技巧上看到这个是，我在觉得它非常贴心。有了这对伪对象（pseudo-element），你可以在用户选一段文本元素时改变颜色和背景。如果你问的看法，我会觉得这非常漂亮。虽然已经从目前的CSS3草案中移除鸟，但是我们希望稍后它在添加进来。

有了变形样式，你可以让元素的外观在鼠标悬停时变大。给Scale（比例）值设置一个大于1的数值，元素就会便打。反过来或，如果值小于1，元素的大小就会缩小。除了Scale比例，它还有其他许多不同的变形方式可用。你可以访问Firefox的开发者页面，查看它们所能实现的效果

有了这个新的多栏布局样式，你可以给文本呈现类似报纸排版的效果。跟在CSS2中的实现方法相比，CSS3中，我们实现这类效果要简单的多。下面，我指定鸟所需要的列数量，以及分离的规则类型，栏与栏之间的空隙有多大。用起来很简单是吧

我希望跟我一样，对CSS3的这些特性感到激动。他给网页设计师和开发者更多的力量，并且让许多方面都简化不少。现在，我们只需等待所有浏览器支持它。当然，我这里演示的知识CSS3新功能的冰山一角。如果你想了解更多信息，技巧和帮助，我建议你访问下面这些网站学习。