圆角实现的三种常规方法图片Div资源-CSDN文库

共10个文件

gif：6个

html：3个

txt：1个

5星 · 超过95%的资源需积分: 9 32 浏览量 2010-01-17 21:56:23 上传评论 1 收藏 6KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

.rar （10个子文件）

圆角效果

y200855194011.gif 187B

u20085519402.gif 187B

8200855193949.gif 188B

2.html 1KB

8200855194015.gif 190B

3.html 1KB

020085520740.gif 298B

说明.txt 5KB

1.html 1KB

020085520744.gif 299B

第一种方法用的是九宫格技术，原理就是通过背景图片的百分比定位，用四个div进行嵌套，然后给最外层的div背景颜色，这个方法的自适应很好，横向纵向都能自适应。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[url]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"[/url]> <html xmlns="[url]http://www.w3.org/1999/xhtml"[/url]> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style> body{ margin:0; padding:0; font-size:12px; line-height:1.8em; } .lt{ background:#014477 url([img]http://www.zknight.net/attachments/month_0805/u20085519402.gif[/img]) 0 0 no-repeat;} .rt{ background:url([img]http://www.zknight.net/attachments/month_0805/8200855194015.gif[/img]) 100% 0 no-repeat;} .lb{ background:url([img]http://www.zknight.net/attachments/month_0805/8200855193949.gif[/img]) 0 100% no-repeat;} .rb{ background:url([img]http://www.zknight.net/attachments/month_0805/y200855194011.gif[/img]) 100% 100% no-repeat; padding:20px; color:#FFF;} </style> <title>圆角边框</title> </head> <body> <div class="lt"> <div class="rt"> <div class="lb"> <div class="rb"> 佳能EOS450D凭借其装备了1220万像素APS-C尺寸CMOS影像传感器，新的9点自动对焦系统中央一点为十字检测点，搭载了流行的Liveview功能，3英寸LCD，DIGIC III处理器的高性能再加上套机5500左右的市场售价，在入门级数码单反相机中极具吸引力，新加入了点测，反光板预锁等以往在入门级机身上很难出现的功能，可以预测，EOS450D成为入门级市场焦点也是顺理成章的事情。机身做工精细，握持手感好，按键排布合理，操控便捷，人机界面友好，功能强大，性价比高，LCD效果良好，色彩还原准确，ISO100-ISO800成像质量都较为优秀，噪点轻微。 </div> </div> </div> </div> <p>这个圆角框可以自由伸展，四个方向都能自适应（拖动浏览器大小试试）</p> <p><a href="[url]http://www.zknight.net"[/url]>返回骑士的博客</a></p> </body> </html> 第二种方案比较常见，也比较简单，分做上中下三个部分，固定宽度，高度自适应，现在大部分网站的圆角都使用这个方法来做： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[url]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"[/url]> <html xmlns="[url]http://www.w3.org/1999/xhtml"[/url]> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style> body{ margin:0; padding:20px; font-size:12px; line-height:1.8em; } .yuanjiao2{ width:427px;} .yuanjiao2 div.top{ background:url([img]http://www.zknight.net/attachments/month_0805/020085520740.gif[/img]); height:14px;} .yuanjiao2 div.c{ background:#014477; color:#FFF; padding:6px 20px;} .yuanjiao2 div.bottom{ background:url([img]http://www.zknight.net/attachments/month_0805/020085520744.gif[/img]); height:14px;} </style> <title>圆角边框</title> </head> <body> <div class="yuanjiao2"> <div class="top"></div> <div class="c"> 第二种方案比较常见，也比较简单，分做上中下三个部分，固定宽度，高度自适应，现在大部分网站的圆角都使用这个方法来做： </div> <div class="bottom"></div> </div> <p>这个圆角框可以上下伸展，高度自适应，宽度固定住</p> <p><a href="[url]http://www.zknight.net"[/url]>返回骑士的博客</a></p> </body> </html> 第三种方法不用到图片，原理是通过div的嵌套和div设置的margin值的递增来实现圆角 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[url]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"[/url]> <html xmlns="[url]http://www.w3.org/1999/xhtml"[/url]> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style> body{ margin:0; padding:20px; font-size:12px; line-height:1.8em; } #nifty{ background: #014477;} #nifty span{ padding:20px; color:#FFF; display:block;} .rtop, .rbottom{ display:block; background:#FFF} .rtop div, .rbottom div{ display:block; height:1px; overflow:hidden; background: #014477} .r1{margin: 0 7px} .r2{margin: 0 5px} .r3{margin: 0 3px} .r4{margin: 0 2px} .rtop .r5, .rbottom .r5{margin: 0 1px;height: 2px} </style> <title>圆角边框</title> </head> <body> <div id="nifty"> <div class="rtop"><div class="r1"></div><div class="r2"></div><div class="r3"></div><div class="r4"></div><div class="r5"></div></div> <span class="text">第三种方法不用到图片，原理是通过div的嵌套和div设置的margin值的递增来实现圆角 </span> <div class="rbottom"><div class="r5"></div><div class="r4"></div><div class="r3"></div><div class="r2"></div><div class="r1"></div></div> </div> <p>这个圆角框可以自由伸展，四个方向都能自适应，而且，不用图片</p> <p><a href="[url]http://www.zknight.net"[/url]>返回骑士的博客</a></p> </body> </html> 第一种方法是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的问题

评论收藏

内容反馈