打造超完美CSS圆角框

时间:2008-02-05 06:16:32   来源:www.drekey.cn  作者:  点击:次  出处:技术无忧
关键字:css 圆角 div html

CSS圆角框的出现已经不是一天两天了,它出现的直接目的就是为了替换原有的以四个角上安放图片为主的圆角框,它的优势在于不需要用图片,对于统一主题中出现不同颜色样式的需求,不需要用作图工具重复制作多套圆角图片,而可以直接从css抽取颜色信息,方便做成独立的配色方案,其次,它对于圆角框长宽等位置信息的设置具有比图片圆角更为高明的自适应能力,真正可以把程序员的注意力集中到内容的排布而不是陷入对页面布局应对的泥藻中(这也可以作为一个简单的分离关注点的有效例子)。

CSS圆角框有如此优秀,那么为什么不用呢,最近,在我和一位好兄弟合作的项目中出现了上述需求(这位兄才在web开发领域拥有多年的经验,曾经自己写过ajax框架,他做的东西精巧别致,思维独特,始终是我心目中强悍的高手),于是决定在其中使用CSS圆角框替换传统的图片圆角,我把设想告诉他,但是他的第一反应是让我不要用CSS圆角,原因如下:

CSS圆角从所周知会出现锯齿,难以处理
CSS圆角内部一般都无法放置复杂的页面元素,放置其中的元素要么会出现大小难以调节,要么会使得整个圆角框发生严重的元素构图混乱(也就是整个页面不听我们的话,发生破裂)
CSS圆角很难跨浏览器,兼容性差
(人们常说提出一个问题往往比解决一个问题更为难能可贵,更何况我的这位兄弟能在第一反应给CSS圆角框的缺陷做出如此精辟的概括,更显示出他在web开发领域扎实的基本功和对事物针砭时弊的观察力,这一点始终让我望尘莫及。)

上述CSS圆角框的缺陷都如我这位兄弟所说,的确都存在,而且没有一个问题能够轻易解决,但是有句话怎么说来着,“车到山前未必有路,与其绕过这座山,还不如踏踏实实一步一个脚印的踏出一条路来”,一来方便自己行走,二来荫庇后人。

那么让我们一个一个的仔细分析上述问题,慢慢解决他们

问题一 首先看锯齿,我们知道锯齿的实质是肉眼无法接受眼前所看到的现实的状况,计算机在处理曲线图形时,若是没有专门的解决方案,锯齿可以说无处不在,那么这个解决方案究竟在那里呢?聪明的你一定会在第一时间联想到,我们的图形处理利器photoshop(以下简称ps),ps在图形处理领域可谓一直是领军羊,它不仅处理速度极快,而且在技术上拥有大量的积累。我们这里只看它是如何处理锯齿的

下图为锯齿和抗锯齿后图形的对比

我们看到在使用了抗锯齿的圆角边缘呈现出一种渐进的半透明状态,没错,它其实就是一个半透明,这也就是ps中抗锯齿算法的本质

假设前景图层上某A点,背景图层上某B点,目标半透明C点,那么我们可以用如下公式来获取目标点C的RGB值:

XML/HTML代码
R(C)=(R(A)*alpha+R(B)*(256-alpha))/256      
G(C)=(G(A)*alpha+R(B)*(256-alpha))/256      
B(C)=(B(A)*alpha+R(B)*(256-alpha))/256      
alpha取值范围   [0,256]      
(R Red, G Green, B Blue)  

这就是一个半透明的算法(其实是一个着差运算),这个算法是方形(box)抗锯齿算法的基础(当然,抗锯齿本身就是一个高级话题,算法也有很多种,比如方形(box),三角(triangle),高斯(gauss),米西尔(mitchell),其中大多是动态图形抗锯齿,有兴趣的朋友可以自己研究一下,这里只讨论最简单的静态图形抗锯齿),方形抗锯齿算法是在过滤区域内使用均等的权重把采样叠加在一起实现的,也就是说离边缘越近,alpha值越高,离边缘越远,alpha值越低,你可以在边缘的各像素平均分布alpha值来达到抗锯齿的目的

对于锯齿和抗锯齿有了基本的概念,那么解决方法也有了

1) 最简单的解决方法是在ps中做一个圆角矩形,放大后把边缘的各像素点依葫芦画瓢照搬到页面上去(用css控制border-color和background-color两个属相实现)
2) 更为稳妥的解决方法应该是做一个专门的程序来解决抗锯齿,这样一通百通,原本想自己写,可是得益于别人已经做了这样的工作

http://www.spiffycorners.com

这是一个php的实现版本,用的就是方形抗锯齿算法,有了这么方便的工具,相信你可以最快速的做出没有任何锯齿的CSS圆角框来

文章评论

共有 0 位网友发表了评论 此处只显示部分留言 点击查看完整评论页面