雨润心灵，哲思天下

算是旧闻了，过去有段时间，我暂时负责的静态页面组一直困扰于一些css特效的制作，比如圆角和阴影效果，用纯css一般说来会产生很多额外标签，影响文档整体结构，也十分不利于和后台开发人员耦合，不过，最大的坏处还在于无法重用。总之，可以做一些改进的事情。

思路是很直接和自然的，把这些重复、繁琐的工作交给js，并通过参数设置实现重用，初始化的工作在onload事件中完成。确定采用js操作DOM的方案后，考察已有解决方案和现有js框架。

因为我一直钟情于jquery，网上也有人做了基于jquery的corner效果，不过没有用到图片，只能通过设置div的背景色来区分圆角外的颜色来达到“圆角”框的效果，这种实现是没有“边”的，和美工交付过来的图效果不一致。可能由于没有使用到它的高级功能，或者没有找到更好的插件吧，直接使用已有插件的方案搁浅了。（其实其他js库里是有圆角效果的，好像YUI和Dojo里面就有，不过，其他库我没有接触过，为一个效果引入一个库，是不可取的，除非整个方案就在使用那个库，比如我选择的jquery）

后来在网上看到一篇“无懈可击的圆角效果”，采用的是所谓的“滑动门”技术，有兴趣的同志可以拿引号中的词作关键词搜狗一下便可以找到。既然是无懈可击，我便欣然采用了其思想和结构，用jquery实现了并交付给静态组制作圆角效果。可是后来发现效果并不理想，首先是不支持透明图片，否则圆角处会乱，图片不透明意味着通用性要降低很多，圆角区域换个颜色就得换图了，不爽啊。而且跨浏览器支持不好，因为产生了一个em标签，ie6下很不听话，当然，通过样式修改是可以调整到一致的，但是，可能我水平有限吧，总之调整好后的东西看上去一点都不“优雅”了。还有一个问题就是它需要切两幅很大的图（至少是圆角区域的高和宽），加之图片不能透明，切个图gif格式的就好几k了，简直就是浪费带宽，几k的代码能做多少事啊，不能这样。

再后来，上amazon买书的时候，发现它的圆角是只在圆角处用了图片实现的，图片所占空间大大降低，那么大的网站，肯定是用专业的库来支持的，虽然不可能因为一个效果而引入一个库，但其实想思想是可以借鉴的。于是，今天结合这种思想用jquery简单实现了一下，还很粗糙，但效果不错，ie6，ie7，ff下都看过了，而且四张圆角图加起来才311字节。透明的图还没有试，应该是没有问题的，就算有问题，因为不是“滑动门”的思路，也是没有关系的。大概的结构和简单样式代码如下：

其中leftTop.gif、rightTop.gif、leftBottom.gif、rightBottom.gif为四个圆角的图片，附件中有。接着基于jquery用js实现了一个简单的插件，js代码位于附件的corner.js中。调用时设置如下：

到这里，您可以看到，文档结构居然如此简单了，和普通的div设置没有两样，而只需要在js调用中配置相关参数，因为是简版，没有设置参数的默认值，所以我列举了所有的参数，语义化的命名，一看便能知道是什么意思。这样一来，圆角效果是不是变得简单多了呢，而且，即便出现某些浏览器不兼容的bug等等错误，修改js里面的实现方法就可以了。

需要进一步要做到工作，简单谈几点吧

1.参数太多，可以把不常用的参数赋予默认值，一般使用时只需设置少数几个参数便可，简化实现过程。这个很简单，我做的参数是一个js对象，作一个或操作便可。jquery插件中有大量这种实现方式。

2.这里用的是img来存放圆角，从web标准来看，没有语义的图片应该当作背景使用，还是因为是简版，实现起来代码可能稍微多一点点，逻辑上没有不同。

3.四个角的圆角效果不相同时，比如上面两个角是圆角，但是下面两个就是普通直角时仍然要切四个圆角（直角也要切），不知道这会不会让人用得不爽。

4.最终的圆角区域高度和宽度在这里是原有高度和宽带加上圆角图片的高度和宽度以及边框的厚度的，我觉得这样挺正常，不知道静态页面人员是否这样认为。

最后附上两种圆角效果的简单代码，一个是“滑动门”的，一个就是上面讲到的。欢迎提出意见，并特别希望有同志进行改进。

采用了滑动门技术的圆角效果：slidecorner

仅仅只是切了圆角区域的圆角效果，Amazon就采用了这种思路：supercorner