加入收藏 | 设为首页 | 会员中心 | 我要投稿 好传媒网 (https://www.haochuanmei.com/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 运营中心 > 产品 > 正文

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

发布时间:2018-10-13 14:33:42 所属栏目:产品 来源:站长网
导读:在网页里使用圆角效果是使网页更加美观的一个简单而有效的方法,可是由于 IE 和一些老式浏览器的存在,如何使页面在各个浏览器里的效果一致一直困扰这网页设计人员。最近我在制作主题时面对一个艰难的抉择,因为我要在主题里使用大量的圆角,我应该如何去

在网页里使用圆角效果是使网页更加美观的一个简单而有效的方法,可是由于 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/

(编辑:好传媒网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    热点阅读