Axiu Blog
,一直没有遇到过。 昨天在 [A-shun](http://www.a-shun.com) 那里看到了一点 chrome 下关于css3的小bug,border-radius和box-shadow一起用会溢出来四个边角。我一直在用chrome,所以对这个问题很好奇哈,遂求教于万能的互联网,终于发现这个问题果然是存在的。 首先:这篇文章是翻译的,来自这里—
主题折腾了不少东西,又看到了很多问题,尤其是IE,全系列全部不支持CSS3,唉,实在不行的话只能妥协用图片了。无奈~~在CSS3里面比较常用的是 border-radius(圆角)和 box-shadow(阴影)。而关于这两个一起用会出现啥,一直没有遇到过。 昨天在 [A-shun](http://www.a-shun.com) 那里看到了一点 chrome 下关于css3的小bug,borde
主题折腾了不少东西,又看到了很多问题,尤其是IE,全系列全部不支持CSS3,唉,实在不行的话只能妥协用图片了。无奈~~在CSS3里面比较常用的是 border-radius(圆角)和 box-shadow(阴影)。而关于这两个一起用会出现啥,一直没有遇到过。 昨天在 [A-shun](http://www.a-shun.com) 那里看到了一点 chrome 下关于css3的小bug,borde
css3中圆角和阴影的实验
Max

主题折腾了不少东西,又看到了很多问题,尤其是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请求。)

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

border-radius and box-shadow

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

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

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

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

-webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4), 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);

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

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

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

下面一部分是一些前瞻,有兴趣的同学可以自己去翻译看看~【传送门】

Comments