软件下载 | 资讯教程 | 最近更新 | 下载排行 | 一键转帖 | 发布投稿
您的位置:最火下载站 > Web前端 > 工具与技巧 > 网页圆角的取舍,困扰着网页设计人员

网页圆角的取舍,困扰着网页设计人员

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

CSS 圆角

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

JavaScript 圆角

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

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

如何取舍

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

BTW

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

出处:http://blog.imbolo.com/web-rounded-conner-choice/

    相关阅读
    栏目导航
    推荐软件