首页 > 工作 > 3种方法实现的圆角边框

3种方法实现的圆角边框

2008年5月5日 发表评论 阅读评论

最近工作种经常要用到圆角的边框,所以就写了几个实现方法,有用图片的,也有不用图片的,估计大家都会,仅仅是做个存档的目的。

预览地址

先看图片,第一种要用到的图片:

第一种方法用的是九宫格技术,原理就是通过背景图片的百分比定位,用四个div进行嵌套,然后给最外层的div背景颜色,这个方法的自适应很好,横向纵向都能自适应。

[html]



圆角边框

佳能EOS450D凭借其装备了1220万像素APS-C尺寸CMOS影像传感器,新的9点自动对焦系统中央一点为十字检测点,搭载了流行的Liveview功能,3英寸LCD,DIGIC III处理器的高性能再加上套机5500左右的市场售价,在入门级数码单反相机中极具吸引力,新加入了点测,反光板预锁等以往在入门级机身上很难出现的功能,可以预测,EOS450D成为入门级市场焦点也是顺理成章的事情。机身做工精细,握持手感好,按键排布合理,操控便捷,人机界面友好,功能强大,性价比高,LCD效果良好,色彩还原准确,ISO100-ISO800成像质量都较为优秀,噪点轻微。

这个圆角框可以自由伸展,四个方向都能自适应(拖动浏览器大小试试)

返回骑士的博客



[/html]

第二种方案比较常见,也比较简单,分做上中下三个部分,固定宽度,高度自适应,现在大部分网站的圆角都使用这个方法来做:

[html]



圆角边框

佳能EOS450D凭借其装备了1220万像素APS-C尺寸CMOS影像传感器,新的9点自动对焦系统中央一点为十字检测点,搭载了流行的Liveview功能,3英寸LCD,DIGIC III处理器的高性能再加上套机5500左右的市场售价,在入门级数码单反相机中极具吸引力,新加入了点测,反光板预锁等以往在入门级机身上很难出现的功能,可以预测,EOS450D成为入门级市场焦点也是顺理成章的事情。机身做工精细,握持手感好,按键排布合理,操控便捷,人机界面友好,功能强大,性价比高,LCD效果良好,色彩还原准确,ISO100-ISO800成像质量都较为优秀,噪点轻微。

这个圆角框可以上下伸展,高度自适应,宽度固定住

返回骑士的博客



[/html]

第三种方法不用到图片,原理是通过div的嵌套和div设置的margin值的递增来实现圆角,代码如下:
[html]



圆角边框

佳能EOS450D凭借其装备了1220万像素APS-C尺寸CMOS影像传感器,新的9点自动对焦系统中央一点为十字检测点,搭载了流行的Liveview功能,3英寸LCD,DIGIC III处理器的高性能再加上套机5500左右的市场售价,在入门级数码单反相机中极具吸引力,新加入了点测,反光板预锁等以往在入门级机身上很难出现的功能,可以预测,EOS450D成为入门级市场焦点也是顺理成章的事情。机身做工精细,握持手感好,按键排布合理,操控便捷,人机界面友好,功能强大,性价比高,LCD效果良好,色彩还原准确,ISO100-ISO800成像质量都较为优秀,噪点轻微。

这个圆角框可以自由伸展,四个方向都能自适应,而且,不用图片

返回骑士的博客



[/html]

—————————分割线————————–
by gemini :

第一种方法是IE6下的一个bug,但是这个bug一般情况下只有在运用了position之后才会产生,这里没有position的存在不知道为什么也会出现,具体原因有待研究。
先说解决方法,
针对IE6给一个HACK
* html p{ position:relative;}
还有一个方法
.lt{ background:#014477 url(http://www.zknight.net//attachments/month_0805/u20085519402.gif) 0 0 no-repeat; zoom:1;}
通过这个方法能够解决来看,还是haslayout的问题

分类: 工作 标签:
  1. 兔子
    2008年5月5日23:45 | #1

    不错,把方法归纳了一下。

  2. 6key
    2008年5月11日19:42 | #2

    第2个方法在IE6下有BUG
    第三种就没问题

  3. 骑士
    2008年5月11日21:07 | #3

    @ 6key, 你点文章开头的“预览地址”就知道了

  4. 乱78招
    2008年11月11日13:00 | #4

    第一种方法 不能实现 圆角边框 可是大小不固定

    第二种方法 可以实现圆角边框 但是大小固定

    第三种方法 都可以,但是有一些无意义的代码。

    http://www.mlcq.net

  5. wwwwww
    2008年12月1日22:47 | #5

    还有浮动啊。做外边做position
    让四个角浮动分别到top .bottom. left.right4个值上。
    呵呵。怎么样骑士? 伟文兄咱们的blog都喜欢裸奔式的嘛?咋感觉和没css查不多呢

  6. 骑士
    2008年12月3日15:14 | #6

    深圳热,穿衣服不爽
    你是哪位~~

  1. 本文目前尚无任何 trackbacks 和 pingbacks.