3种方法实现的圆角边框
最近工作种经常要用到圆角的边框,所以就写了几个实现方法,有用图片的,也有不用图片的,估计大家都会,仅仅是做个存档的目的。
先看图片,第一种要用到的图片:
第一种方法用的是九宫格技术,原理就是通过背景图片的百分比定位,用四个div进行嵌套,然后给最外层的div背景颜色,这个方法的自适应很好,横向纵向都能自适应。
[html]
这个圆角框可以自由伸展,四个方向都能自适应(拖动浏览器大小试试)
[/html]
第二种方案比较常见,也比较简单,分做上中下三个部分,固定宽度,高度自适应,现在大部分网站的圆角都使用这个方法来做:
[html]
这个圆角框可以上下伸展,高度自适应,宽度固定住
[/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的问题
不错,把方法归纳了一下。
第2个方法在IE6下有BUG
第三种就没问题
@ 6key, 你点文章开头的“预览地址”就知道了
第一种方法 不能实现 圆角边框 可是大小不固定
第二种方法 可以实现圆角边框 但是大小固定
第三种方法 都可以,但是有一些无意义的代码。
http://www.mlcq.net
还有浮动啊。做外边做position
让四个角浮动分别到top .bottom. left.right4个值上。
呵呵。怎么样骑士? 伟文兄咱们的blog都喜欢裸奔式的嘛?咋感觉和没css查不多呢
深圳热,穿衣服不爽
你是哪位~~