你们中的许多人可能已经听说了关于CSS3的所有传闻，但是我们今天到底可以使用哪些技术呢?在本文中，我将向您展示一些不同的CSS3技术在一些领先的浏览器(如Firefox, Chrome, Safari, Opera)上运行良好，而在不受支持的浏览器(如ie)上运行良好。
Internet Explorer)。使用特定于浏览器的扩展，许多提议的CSS3样式今天就可以使用!使用这些技术的是最好的网页设计机构!
如果你不知道浏览器扩展，这些是带有特定供应商前缀的CSS样式。由于CSS3还不完全支持，我们必须使用这些扩展。它们如下:
- Mozilla Firefox /壁虎:
-moz - - Webkit (Safari和Chrome):
webkit -(注意:一些webkit前缀只在Safari中工作，而不是Chrome)
正如您可能已经猜到的，使用这些扩展的一个缺点是，我们必须使用上述所有前缀来获得在Firefox、Safari和Chrome中呈现的CSS3样式。IE不支持CSS3，或者像其他领先的浏览器一样有扩展，这对任何人来说都不奇怪。好了，说够了，让我们开始吧!
注意:没有前缀的样式是实际的W3规范建议。
关于本页演示的说明
这些示例都在这个页面上，所以如果您没有正确地看到一些示例(或根本没有看到)，那么您正在使用的浏览器不支持特定的CSS3技术。
阴影
投影效果接受多个值。首先是阴影的颜色。它会接受四个长度值，前两个是x(水平)偏移和y(垂直)偏移。
下一个值是添加到阴影的模糊量。第四个也是最后一个值是模糊的扩展量。框影也会接受一个插图关键字，创建插入阴影。
框影:#333 3px 3px 4px;-moz-box-shadow: #333 3px 3px 4px;-webkit-box-shadow: #333 3px 3px 4px;
投影演示:
梯度
渐变一开始可能会让人很困惑，尤其是在比较它们之间的差异时-moz而且webkit．与-moz首先定义渐变的方向，然后确定开始和结束的颜色。webkit渐变需要更多代码。
首先定义渐变的类型。接下来的两个值定义方向。最后，最后两个值定义渐变的开始和结束颜色。
-moz-linear-gradient(-90度,aa6de # 1, # 022147);-webkit-gradient(线性，左上，左下，从(#1aa6de)，到(#022147));
梯度演示:
RGBA
RGBA颜色方法实际上比它最初看起来更容易。它有四个值，按顺序分别是:红色的数量、绿色的数量、蓝色的数量和不透明度级别。不使用十六进制(＃)颜色，你设置颜色在RGB模式，而不透明度的水平可以给颜色一个透明的外观。
不透明度接受之间的值0而且1,0完全不透明1是实际定义的颜色。下面的示例的不透明度值为5，使该元素的透明度达到50%。rgba实际上不需要任何浏览器扩展。
Background-color: rgba(0,54, 105， .5);
RGBA演示:
奥软
和RGBA一样，CSS3可能会让HSL颜色模型提供给我们。这可以给我们提供一整套颜色和色调。在这个颜色模型中，奥软代表色相、饱和度和亮度。
色相是颜色轮上的一个度，而饱和度和明度是颜色的百分比值。
background - color:高速逻辑(209年,41.2%,20.6%);
奥软演示:
边框颜色
对于这种样式，您必须定义border-top，边境，边界底部,border-left分别得到下面的效果。你会注意到我已经定义了一个8px的边框和8种不同的颜色为每个边框颜色样式。这是因为相同数量的颜色需要匹配的像素数量边境定义。
边界:8px固体#000;-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;-moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;-moz-border-right colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
边框颜色演示:
文本选择颜色
我不得不说，我认为改变文本选择颜色是一个非常令人兴奋的新功能。我第一次看到这个css技巧我觉得很甜蜜。与::选择伪元素，可以修改颜色而且背景当用户高亮显示文本元素时。
如果你问我的话，我觉得很漂亮。::选择从目前的CSS3草案中删除了，但让我们希望他们稍后会添加回来!
::selection {background: #3C0;/* Safari */ color: #90C;}::-moz-selection{背景:#3C0;/* Firefox */ color: #90C;｝
文本选择颜色演示:
变换
与变换样式，您可以使元素在悬停时显示为“增长”。上面的值1添加到规模时，元素的大小将增加。另一方面，下面的值1将导致元素的大小减小。
随着规模，它们有许多不同的转换可供使用。访问Firefox的开发者页面，看看你还可以使用什么。
-moz-transform:规模(1.15);-webkit-transform:规模(1.15);
转换演示:
多栏布局
有了这种新的多栏布局样式，我们可以给我们的文本一个“报纸”类型的外观。与通过CSS实现的常规方式相比，这是非常简单的。下面我指定了我想要多少列，我想用什么类型的规则来分隔它们，以及我想要在列之间有多大的空隙。
简单的哈?
-moz-column-count: 3;-moz-column-rule: 1px黑色;-moz-column-gap: 20 px;
多栏布局演示:
总结
我希望你们都和我一样对CSS3感到兴奋。它给了我们作为网页设计师和开发者更多的力量，让很多方面变得更简单。它是伟大的使用为所有行业和类型的网站，从学院的网站小餐馆。
现在，如果我们能所有浏览器支持吧!当然，我刚刚向您展示的只是CSS3的一些潜在新特性。如果你想要更多的信息、建议和帮助，我鼓励你访问下面的所有网站:
相关内容
- 六个问题:Eric Meyer在CSS3上
- 学习CSS3的20个有用资源
- 10个简单的jQuery设计技巧
- 相关类别: CSS和Web开发
- 用于将CSS的颜色从RGB更改为HEX
