博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

CSS圆角实现原理(个人见解)

Posted on 2011-08-27 13:44  枫之一刀  阅读(417)  评论(0编辑  收藏  举报

CSS圆角的实现方式有两种

第一种是用图片,通过在内容周围做背景图片。

第二种是利用像素间距形成弧度。

如图:

将此图片放大效果如下: 

 

可以看到弧角其实是利用了像素的间距不同,我们在圆角矩形外面加一层DIV,用来控制边界。之后我们在需要显示内容的上下加上一些HTML标签,可以是div,也可以是B等,

因为默认情况下这些标签的背景是透明的,我们利用HTML标签从上到下的堆叠效果先设置上边框,控制它左右的边距,然后第二个的编剧稍微减少,设置左右Border的宽度和高度。

以此类推完成一个圆角矩形。