无图片山顶角

 

无图片山顶角

---

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

---

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

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

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

 

图一

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

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

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

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

下载：山顶角