Linux ABC

在web2.0的时代，网页设计大量采用了圆角效果，套用《大腕》里的一句台词就是“你不圆都不好意思跟别人打招呼。”，alfie也不能免俗，决定为LinuxABC的页面元素加入圆角效果。

目前实现圆角效果的主流方式有两种，一种是CSS+DIV，另一种是使用圆角图片。这两种方法对alfie来说都不方便，第一种需要掌握复杂的div嵌套，而且圆角无法做到抗锯齿；第二种则需要使用图像处理工具，而alfie最怕的就是去学习photoshop这个庞然大物，所以决定另辟蹊径。

曾经见过有人用JavaScript解决过圆角问题，而LinuxABC将大量采用jquery，所以alfie搜索了一下jquery的官方网站，还真的有好事者做了圆角效果的插件，而且还不少：

1. JQuery Curvy Corners
2. JCorners
3. JQuery Corner Gallery
4. rounded corners

对比一下上面几个插件，alfie最终决定采用rounded corners。因为另外三个插件不支持在div里直接提供参数，当多个页面元素的圆角弧度均不相同的时候需要用户在$("#ElementID").corner()中单独提供参数，这就造成展示层跟代码层的混合，不利于后期的维护。下面以一个例子展示JQuery Corner Galley和Rounded Corners两个插件的不同之处。

为LinuxABC的

1. topNavi的左上角和右上角做圆角效果；
2. wrapper的左下角和右下角做圆角效果；

JQuery Corner Galley：

<script>
   $(document).ready(function(){
      ...
      $('#topNavi').corner("round top 4px");
      $('#content').corner("round bottom 5px");
      ...
   });
</script>
<div id="topNavi">...</div>
<div id="content">...</div>

Rounded Corners：

<script>
   $(document).ready(function(){
      ...
      $('.rounded').corner();
      ...
   });
</script>
<div class="rounded {4px top}" id="topNavi">...</div>
<div class="rounded {5px bottom-left}" id="content">...</div>

rounded corners这种方式无疑更方便些，而且后期的维护相对简单。

短短几行代码就能搞定大部分的圆角效果，jquery实在是太神奇，想不爱她都不行！