css3中圆角和阴影的实验

主题折腾了不少东西，又看到了很多问题，尤其是IE，全系列全部不支持CSS3，唉，实在不行的话只能妥协用图片了。无奈~~在CSS3里面比较常 用的是 border-radius（圆角）和 box-shadow（阴影）。而关于这两个一起用会出现啥，一直没有遇到过。

昨天在 A-shun 那里看到了一点 chrome 下关于css3的小bug，border-radius和box-shadow一起用会溢出来四个边角。我一直在用chrome，所以对这个问题很好奇 哈，遂求教于万能的互联网，终于发现这个问题果然是存在的。

首先：这篇文章是翻译的，来自这里—-【传送门】。下 面是正文。

在他（原作者）创建 DeCal 的过程中， 为了增强视觉效果，使用了一些CSS3的渲染技术。主要包括了3个：box-shadow 、border-radius 和 RGBa 。

有趣的是不同浏览器对这些渲染技术的支持情况。像3.6+ 和 Opera 10.5+这些浏览器，是灰常有前途滴；但另外一些，诸如 Safari 和 Chrome，在支持上就不那么完整或者说，是有漏洞的。在他创建的这个日历视图上来看，他在按钮上使用了如上全部3个渲染效果。下面的是原本为橙色按钮 测试有关的CSS：

我们从一些简单的 background color和padding的语法开始，逐步地添加一些top/bottom border的定义，之后是为各种浏览器引擎使用的border-radius（圆角效果）（定义起来很烦人），之后是为各种浏览器引擎使用的繁杂的 box-shadows（唉，真是浪费带宽哪！）。我们在视觉方面，为CSS写了冗长的代码，但是做这些显然要比直接用一个背景图片要划算的多。（为便于 比较，以上的CSS代码大约有700 bytes大;但是等效的背景图片很轻易地就达到6-7k，另外还得加上HTTP请求。）

下面有一个放大的细节图，显示在windows系统下，以上代码在五种浏览器中的显示效果：

正如你所看到的，不同的浏览器支持效果差异很大。IE7啥都不识别（杯具一个）。其他几个毫无疑问都支持border-radius圆角效果；在像 素等级上他们几乎都是相同的。有一个细微的差别是顶部和底部的边框在底部曲线那里是混合的，在我看来，Firefox 3.6在绘制曲线上表现的最出色，背景颜色和边框颜色上，Opera 10.5的表现紧随其后。

各种浏览器对CSS3的box-shadow支持情况

关于CSS3最爽的一件事是可以为每一个DOM元素定义同一款式的多变样式。多重的背景效果确实很棒。但是多变的box-shadows同样很好， 因为它使复杂的梯度设计，就像我所设计按钮的斜面，完全不需要任何图片。总结CSS，第一个inset语句显示的是顶部的高亮黄色阴影，第二个inset 显示的是其下部的微黄阴影。第三个inset是整个按钮显示出来的深橙色阴影。最后一个是元素的外阴影。。

测试结果很有趣。根据源代码所显示的效果来看，Safari啥都不支持。但是，如果你把外阴影放到inset规则之前，并且取出最后一条语句（定义 的是延伸的阴影），像下面这样 …

… 外部阴影又起作用了。所以Safari渲染RGBa还可以，但是目前还不支持inset box-shadows（内阴影）。

Chrome就更有趣了（ A-shun 遇到的状况）。由于它使用了Webkit来定义，尝试去创建正确的内阴影，但是产生了渲染错误（这些方形的边角明显伸出了边界），而不像其兄弟 Safari啥也不做。删除inset语句可以修复它，但是显示效果就是一般的平面按钮了。这些，在不断进步精神的指引下，将是现在所要做的。3lian.com （值得注意的是，chrome的外阴影表现也不尽如人意；它需要至少4px，这个明显有点陈旧。）

Opera 10.5 和 Firefox 3.6 在这个项目上明显是胜者。两者都产生了平滑的按钮并且没有渲染错误，并且 非常平滑，很好的渐变阴影远远超过了定义4px来产生一个Photoshop质量的效果。在这两者之间，Firefox的渲染效果稍微好了那么一点点，它 的内部效果分布更加均匀。我在这里严重推荐这俩浏览器，因为它们俩比其他浏览器出色太多了。至少目前如此。