看到CSS3在实际运行的网站上很像发现喜马拉雅雪豹或大熊猫。
因为约53%的浏览器在使用不支持CSS3(咳咳，IE，咳咳)，大多数网页设计师只是不经常使用它。至少他们不会在自己设计的工作网站上使用。因此，大多数人不会经常看到它，即使他们看到了，也只是短暂的一瞥。
这并不是说它不在那里——就像雪豹和熊猫一样，要在野外看到CSS3，你需要隐蔽、聪明和耐心。
所以，闲话少说，这里有一些CSS3的例子。但请务必避免大的，突然的动作。你不会想把它吓跑的。
要了解更多关于CSS3的知识，你也应该看看这些文章和教程:
圆角
我们以前是怎么做圆角的
通过为盒子的角创建单独的图像，或者使用JavaScript掩盖尖锐的边缘。
我们如何用CSS3做圆角
border - radius: 5 px;-moz-border-radius: 5 px;-webkit-border-radius: 5 px;
CSS3圆角的例子
下面这些网站上的圆角很明显，看起来也很简单，但任何一个网页设计师都知道，如果没有CSS3，它们就不是那么容易创建的。推特
文本的影子
我们以前是如何做文本阴影的
创建两个具有相同文本的元素，为其中一个元素设置阴影颜色，将其偏移一到两个像素，并使用z - indexCSS属性。
我们如何用CSS3做文本阴影
文字阴影:2px 2px 4px #000;
CSS3文本阴影的例子
下面的站点以不同的方式使用文本阴影。JolicloudJolicloud在整个网站使用CSS3文本阴影。
A Different Design在网站名称中使用了白色的文本阴影，让文本看起来很酷。
在Time2Project中，当鼠标悬停在“谁”、“什么”和“哪里”菜单链接上时，它们使用文本阴影来突出显示自己——非常酷。
盒阴影
我们以前是怎么做盒影的
通过创建带有阴影的盒子图像或使用JavaScript插件。
我们如何用CSS3做盒子阴影
Box-shadow: 2px 2px 4px黑色;-moz-box-shadow: 2px 2px 4px黑色;-webkit-box-shadow: 2px 2px 4px黑色;
CSS3盒子阴影的例子
同样，通过下面的两个站点，我们可以看到使用相同CSS3技术的两种截然不同的方式。卡门的设计在camen设计中，页脚保持在相同的位置，盒子阴影被用来给主要内容区域在页脚下方滑动的错觉。
css技巧在CSS-Tricks上，盒子阴影效果几乎用于网站上的每个盒子，突出显示你鼠标悬停在哪个盒子上。
RGBA颜色
我们以前是如何使用RGBA颜色的
通过在CSS中调用PHP脚本，从而欺骗浏览器以RGBA格式覆盖颜色。这绝不是一种好方法，因为它会导致PHP文件中出现大量您再也不会使用的额外代码。
我们如何用CSS3做RGBA颜色
背景:rgba(150,25,150,0.5);
CSS3 RGBA颜色的例子
国际大猩猩保护计划(IGCP)在IGCP网站上查看令人敬畏的半透明大猩猩。现在稍微向右看。视频播放器周围的盒子使用RGBA作为一种方式，在它后面的横幅上分层半透明容器。
24的方式24Ways在整个网站都使用了这种效果，但最引人注目的是在顶部，在标题横幅上悬停使用RGBA来增加不透明度。
不透明度水平
我们以前是如何处理不透明度级别的
通过创建透明的png，或者使用IE的CSS过滤器。
我们如何使用CSS3实现不透明度级别
透明度:0.5;
CSS3不透明度级别的例子
用CSS3改变不透明度级别是增加用户界面体验的最酷的方法之一，也是最简单的方法之一，因为它只需要很少的代码。罐道梁在Bunton，每个单独的盒子都使用不透明度来显示设计师对他的作品集的评论——所有这些信息都一直在那里，只是在你将鼠标悬停在它上面之前，它的不透明度为0。
Peaxl在“订阅”框中更巧妙地使用了它，当你点击它时，现有的文本会慢慢消失。
31日三31Three在其投资组合示例中也使用了这种方法，用鼠标悬停使每个圆圈微微发亮。好了。
梯度
我们之前是如何做渐变的
图像切片的梯度重复作为背景图像。
我们如何用CSS3做梯度
背景:-moz-linear-gradient(100% 100% 90deg， #1a1a1a， #808080)背景:-webkit-gradient(线性，0 0,0 100%，从(#1a1a1a)，到(#808080));
CSS3渐变的例子
虽然这个例子不是CSS3最漂亮或最激动人心的例子，但它可能是最实用的。通过使用CSS3而不是图像，使顶部的蓝色横幅变成浅蓝色，网站不需要每次都提供该图像。像这样的小事情对于一个流量很大的网站来说是不同的，它表明了一旦CSS3成为标准，它可以完成什么。
@字体面，文本阴影，RGBA，圆角
(也就是目前使用CSS3的网站的圣杯＊）
我们以前是如何创建这样的网站的
我们没有。
我们现在是如何制作它们的
CSS3。大量的CSS3。
CSS3站点的例子
下面的站点是使用CSS3可以做什么的例子。当然，由于CSS3还没有在所有浏览器中实现，并且使用CSS3的浏览器的实现可能会有所不同，并不是所有这些都能在每个浏览器上正确呈现。然而，这是一个有趣的展望，在网页设计的世界将很快成为可能。TheFella
Mozilla实验室喷气背包
脚注
*@font-face是在IE5中实现的，是CSS2的一部分，所以实际上是像Firefox这样的现代浏览器在实现上落后了。
