无图片山顶角

 

无图片山顶角


作者:冰极峰   转载请注明出处


看到论坛上有个朋友展示了一个山顶角的实例,但是这儿需要更正一下的是,哪不是圆角框,正规的名称叫做山顶角(mountaintop corner),它最早是由www.simplebits.com的作者Dan Cederholm首创的。

作者采用的方式用四个透明斜角蒙版图片盖住一个矩形的四个角,从而造成一种倒角的效果。

而我创建的这个山顶角,和他们实现的方法都不一样。我是利用一个容器的border边框的斜角效果来制造这四个角图片的。整个实例未用到一张图片。具体的实现原理请参看我的另一篇文章《Border属性的终极研究---看我七十二变》。本文章也算是哪篇文章的一个实际案例吧!

 

图一

这种山顶角应用于小曲线时效果比较好,看起来比较精细,但不适合大曲线,一放大就出锯齿状的角框。

本实例测试的兼容环境是:

IE6、IE7、FF3、谷歌、TT、opera9.63,其它浏览器未作测试。

由于博客园的文章添加系统会自动删除页面中空标签,所以请朋友们下载下来观看。

下载:山顶角

posted @ 2009-03-14 21:24  Biny  阅读(3928)  评论(2编辑  收藏  举报