Home > Develop > 网页圆角的取舍
2010April . 20th

网页圆角的取舍

在网页里使用圆角效果是使网页更加美观的一个简单而有效的方法,可是由于 IE 和一些老式浏览器的存在,如何使页面在各个浏览器里的效果一致一直困扰这网页设计人员。最近我在制作主题时面对一个艰难的抉择,因为我要在主题里使用大量的圆角,我应该如何去协调圆角在不同浏览器里的效果?下面我将列举一些产生圆角的方法,并阐述一下它们的优点和缺点,各位观众在以后遇到这种问题的时候可以根据自己的时间或者技术需要进行取舍。

CSS 圆角

关于 CSS 圆角在《再谈 CSS 圆角》一文里已经有详细的阐述。但纯 CSS 的圆角一些老式浏览器根本不支持。使用框架叠加的话不但会使页面结构变得非常复杂,而且大量的多余框架也会给一些后期开发带来困难。而使用圆角的图片作为背景则很难在一些灵活多变的页面里进行应用。因此 CSS 圆角目前只能在一些框架(主要是宽度)比较固定的页面里,通过图片的方式来实现。

JavaScript 圆角

有高手为了使像 IE 这样落后的浏览器也能显示非图片和框架叠加产生的圆角开发了一些产生圆角的 JavaScript 库,例如 CurvyCorners 是目前我测试过的最强大的一个 JavaScript 圆角效果库,不依赖任何框架。并且通过特定的 CSS Class 就能使 IE 也能产生圆角效果。

通过 JavaScript 框架实现的圆角插件更多,这里不一一介绍。但通过 JavaScript 虽然能解决大部分浏览器的圆角支持问题,但却可能会引起本来正确的一些框架错位,虽然这种错位也能通过 CSS Hack 来修正,但一旦浏览器禁用了 JavaScript 又会产生新的错位。因此 JavaScript 圆角应用并不广泛。

如何取舍

在框架固定的页面里,可以用 CSS + 图片的方法实现圆角效果,使 IE 也能显示圆角。但在一些多变的页面里,就只让现代的浏览器能看到圆角吧,老式浏览器被淘汰只是时间问题!

BTW

我的新主题正在测试中,如发现问题麻烦大家向我反馈一下。另外推荐使用非 IE 核心的最新版浏览器进行浏览。

, 推荐到豆瓣
  1. 2010April . 20th - 10:02 PM

    JS的圆角我也用过,有个致命的弱点,如果有用JS/JQ隐藏起来的层里有用到圆角,在被触发之前,CurvyCorners会因为找不到相应的ID而报错~
    总之,IE很杯具,先天不足,后天还是补不足

  2. 2010April . 20th - 10:02 PM

    IE8下不是圆角,chrome下是

  3. 2010April . 20th - 10:09 PM

    背景固定,滚动页面时我总感觉有点眩晕。。。。

  4. 2010April . 20th - 10:58 PM

    Chrome下表现不错

  5. 2010April . 21st - 12:37 AM

    Firefox 有个问题,就是对于background 是fixed 的页面,滚动的时候CPU占用就比较高。所以,这种非主流的固定背景图片还是算了吧。

  6. 2010April . 21st - 12:39 AM

    另外,对于圆角的效果,可以忽略IE,直接用CSS3 就好了,谁支持标准就谁有圆角,这样的progressive enhancement 比较好,twitter 也是这样的。IE用户也不会对这些细节进行审美的。

  7. 2010April . 21st - 4:49 PM

    说来说去IE6最该死

  8. 2010April . 23rd - 11:11 AM

    最近几个主题我都没考虑ie下的圆角,唉,麻烦,又懒得画图

  9. 2010May . 7th - 8:17 AM

    windows7自带的 ie8表示完全无任何压力……

Subscriber selector

Close