主题折腾了不少东西，又看到了很多问题，尤其是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：
| #cal td.smd_cal_event span a { background: #fab102; padding: 4px 10px 5px 10px; border: 1px solid #fff; border-bottom: 1px solid #363d50; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; -moz-box-shadow: inset 0 4px 7px 0 #fff25f, inset 0 -2px 4px 0 rgba(255, 242, 94, 0.4), inset 0 -4px 8px 0 rgba(207, 75, 3, 0.9), 0 2px 4px 0 rgba(0, 0, 0, 0.4); -webkit-box-shadow: inset 0 4px 7px 0 #fff25f, inset 0 -2px 4px 0 rgba(255, 242, 94, 0.4), inset 0 -4px 8px 0 rgba(207, 75, 3, 0.9), 0 2px 4px 0 rgba(0, 0, 0, 0.4); box-shadow: inset 0 4px 7px 0 #fff25f, inset 0 -2px 4px 0 rgba(255, 242, 94, 0.4), inset 0 -4px 8px 0 rgba(207, 75, 3, 0.9), 0 2px 4px 0 rgba(0, 0, 0, 0.4); } |
我们从一些简单的 background color和padding的语法开始，逐步地添加一些top/bottom border的定义，之后是为各种浏览器引擎使用的border-radius（圆角效果）（定义起来很烦人），之后是为各种浏览器引擎使用的繁杂的 box-shadows（唉，真是浪费带宽哪！）。我们在视觉方面，为CSS写了冗长的代码，但是做这些显然要比直接用一个背景图片要划算的多。（为便于 比较，以上的CSS代码大约有700 bytes大;但是等效的背景图片很轻易地就达到6-7k，另外还得加上HTTP请求。）
感谢 Kevin 的投稿
