圆角矩形

前两天误打误撞,解决了博客打开速度慢的问题。其实本来不应该是个问题的,但是我们不幸待在一个全球最大的局域网里,所以就硬是变成了一个问题。解决的办法挺简单,就是把对 ajax.googleapis.com 上的 jQuery.js 的引用去掉就好了。前端技术非我所长,这么有底气地把它去掉是因为我在接下去没多远的代码看到有另外的一份引用。去掉以后略做测试,也就是把页面多刷新了几次,没发现有什么问题。

今天要在 Windows XP 下做点事情,就把尘封已久的虚拟机打开了。突发奇想,想看一下站点在 Windows XP 下是什么状态,尤其是 IE 浏览器里。打开乍看之下也都正常,可是浏览器弹出一个对话框,说是某个脚本行有问题,定位后一看,恰恰是 jQuery。仔细检查了下,才发现这行脚本位于留下的那个 jQuery.js 引用之上,换了一下位置就好了。

这样一来,引发了我老人家的一个好奇心,这个脚本执行正常与否似乎没有影响到页面,那还要他干嘛?难道有什么没有注意到的地方?又检查又测试,最后搞清楚了,这个脚本还真的用处不大,仅仅是对拥有焦点的文本输入框做了一些样式上的美化。

上面说到“乍看之下”正常,再看的话,还有一些小问题,那就是用于执行页面缩放的那两个按钮,在 IE 8 下面,是个四四方方的矩形,而不是应该的圆角矩形。顺手在搜索引擎里查了一下,这才发现,在 IE 的低版本里面,呈现一个圆角矩形,如果不用图片的话,原来是个难度不低的技术活儿。心里不禁对前端开发工程师多了一丝同情。

解决办法各种各样,以下列出几个以作备忘(均以不使用图片为要求之一):

http://malsup.github.io/jquery.corner.js
https://github.com/csnover/RoundRect/blob/master/roundrect.js
https://code.google.com/p/curved-corner/

第一个貌似是用小 div 堆叠出效果,第二里则动用到了 VML,而第三个更是用到了 htc(不是那个手机厂商)这样的技术。但就技术的花样来讲,也值得纪念一下了。

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注