无图片山顶角
无图片山顶角
作者:冰极峰 转载请注明出处
看到论坛上有个朋友展示了一个山顶角的实例,但是这儿需要更正一下的是,哪不是圆角框,正规的名称叫做山顶角(mountaintop corner),它最早是由www.simplebits.com的作者Dan Cederholm首创的。
作者采用的方式用四个透明斜角蒙版图片盖住一个矩形的四个角,从而造成一种倒角的效果。
而我创建的这个山顶角,和他们实现的方法都不一样。我是利用一个容器的border边框的斜角效果来制造这四个角图片的。整个实例未用到一张图片。具体的实现原理请参看我的另一篇文章《Border属性的终极研究---看我七十二变》。本文章也算是哪篇文章的一个实际案例吧!
图一
这种山顶角应用于小曲线时效果比较好,看起来比较精细,但不适合大曲线,一放大就出锯齿状的角框。
本实例测试的兼容环境是:
IE6、IE7、FF3、谷歌、TT、opera9.63,其它浏览器未作测试。
由于博客园的文章添加系统会自动删除页面中空标签,所以请朋友们下载下来观看。
下载:山顶角