本文来自：desandro.com。
这个Opera logo是完全采用css绘制的，没有用到任何图片。点这里查看png格式。

可惜的是并非所有的浏览器都能正确显示。仅在Firefox 3.6, Safari 4, 或 Chrome 5里显示良好。
另一个值得关注的是，通过本次示例，能让我有机会进一步了解不同的浏览器对CSS3的属性支持情况。

Border Radius（圆角）
在大多数的CSS3教程里，对圆角属性的功能还是没有给予足够重视。它的语法很容易：但它不是使用一个值，而是有两个。第一个值是水平的，第二个是垂直的（下面的X和Y，就像其他2D背景，位置的值）。需要注意的是在Mozilla，Opera和Webkit 显示之间的差异。 Mozilla使用斜线，WebKit的使用空间。

-moz-border-radius: 220px/235px;
-webkit-border-radius: 220px 235px;
border-radius: 220px/235px;

CSS3的圆角属性将不再上虚幻的了。Opera10.5和IE9都将提供支持，所以将不再需要添加“-”前缀了。对于这此浏览器而言，并非完美的椭圆形，但多半是圆的。请注意border-radius应该是第一位的，px会覆盖-webkit-border-radius(所以，它应该写在-moz和-webkit之后)。

以下略…

Gradients（渐变）
因为额外的花了时间去做，Firefox支持css渐变比webkit要稍后一些。但Mozilla的语法更为直观，也更容易记住。如果只是一个简单的两色渐变，Mozilla 的语法：角度，颜色，颜色。而webkit的语法则更加的精细。

background: #800;
background: -moz-linear-gradient(-90deg, #F88, #800);
background: -webkit-gradient(linear, 0 top, 0 bottom, from(#F88), to(#800));

这种差异会在多种颜色渐变的时候体现。以本文为例，在一个软大的区域填充了3种颜色：

background: #E71616;
background: -moz-linear-gradient(-90deg, #FE878A, #E71616 50%, #800000 80%,
#800000 85%, #b80304);
background: -webkit-gradient(linear, 0 top, 0 bottom, from(#FE878A),
color-stop(50%, #E71616), color-stop(80%, #800000),
color-stop(85%, #800000), to(#b80304) );

以下略…
Box Shadow（投影）
投影属性的支持浏览器之间是保持一致。除了各自的前缀外，语法是完全相同的。

-moz-box-shadow: 0 100px 30px hsla(0,0%,0%,.2);
-webkit-box-shadow: 0 100px 30px hsla(0,0%,0%,.2);
box-shadow: 0 100px 30px hsla(0,0%,0%,.2);

相关资源：
Mozilla Developer Center
Safari Reference Library
Western Civilization CSS3 Sandbox