CSS高级技巧之圆角矩形

　　滑动门适用范围很广, 以至于随处可见.

　　4. 山顶角(MountainTop)

　　Web大师Dan Cederholm的发明, 和他在Web Standard Solutions中的变色龙小图标有异曲同工之妙.

　　如果用 3.滑动门 的技术创建多种颜色的圆角矩形, 那是不是要建立多组不同颜色的图片呢? 那是不是会很麻烦呀? 幸运的是Dan为我们带来了山顶角. 他建立的不是多种颜色的图片组, 而是一组圆角的蒙板. 用蒙板盖住背景色, 生成圆角矩形, 这种逆向思维令人敬佩.

　　圆角蒙板

　　基本的HTML代码和CSS代码与上例相同, 也需要4个不同的圆角蒙板. 代码不做重复.

　　Tips:

　　可以使用.png来创建圆滑的透明蒙板, 但介于IE6和以下版本不支持png-24的透明效果, 需要用到Hacks, 所以不太推荐. 所以对于gif图片的蒙板, 对于小弧度的圆角矩形效果较好, 大弧度的圆角矩形可能会出现锯齿. 同样的需要添加额外的非语义标签, 语义化狂热者们可以用JavaScript来完成这个工作.

　　5. CSS Sprites 圆角

　　CSS Sprites并不是专门制作圆角矩形的, 但是它提供了一种制作圆角矩形的方案.

　　结构构成图

　　实际用到的圆角小图

　　只单单用background的position来指定圆角图片背景定位, 但是会多出很多额外标签, 这里不做推荐.