上篇 下篇

一张图片实现网页圆角

2010年04月09日 ⁄ Web前端 ⁄ 转载：原文链接 ⁄ 共 1050字 ⁄ 评论数 12 ⁄ 被围观 2,348+

一张图片就能实现圆角？是什么样的图片？怎样实现？

其实这张图片是一个小圆圈，如下面的例子将要使用的图片为 10 * 10 大小的图片： ，太小了是吧，不过已经够了。

基本思路

准备四个小容器，分别放小圆圈图片的左上、右上、左下、右下四个部分，然后再分别定位到父容器的四个角上。

图片示意：

代码实现

XHTML代码：

1. <div id="container">
2. <h1>一张图片实现圆角</h1>
3. <b class="lt"></b>
4. <b class="rt"></b>
5. <b class="lb"></b>
6. <b class="rb"></b>
7. </div>

四个 b 为小容器，不要管它们，放上去就是了。

CSS代码：

1. *{
2. margin:0;
3. padding:0;
4. }
5. #container{
6. position:relative;
7. margin:20px auto;
8. padding:20px;
9. width:400px;
10. height:50px;
11. border:1px solid #000;
12. }
13. b{
14. position:absolute;
15. width:5px;
16. height:5px;
17. font-size:0;
18. background-image:url(images/yuan8.jpg);
19. background-repeat:no-repeat;
20. }
21. .lt{
22. left:-1px;
23. top:-1px;
24. background-position:left top;
25. }
26. .rt{
27. rightright:-1px;
28. top:-1px;
29. background-position:rightright top;
30. }
31. .lb{
32. left:-1px;
33. bottombottom:-1px;
34. background-position:left bottombottom;
35. }
36. .rb{
37. rightright:-1px;
38. bottombottom:-1px;
39. background-position:bottombottom rightright;
40. }
41. h1{
42. text-align:center;
43. font-size:24px;
44. }

这种方法似乎很完美，但遗憾的是：如果父容器（本例为 #container）的高度为基数时，在 IE6 里下方会出现一条横线，如下图：

所以，如果使用这种方法，就要控制好父容器，使它的高度为偶数。

另外：由于 IE 默认行高，b{height:5px} 会没有效果，所以加上了 font-size:0 消除了这个 bug ，虽然 overflow:hidden 也可以消除这个 bug ，但本例中不适合用这种方法，否则在 IE 中下半部分的圆角会没有效果或效果不完美

返回

作者: 知更鸟

该日志由 知更鸟 于671 天前发表在Web前端分类下， 你可以发表评论，并在保留原文地址及作者的情况下引用到你的网站或博客。
转载请注明: 一张图片实现网页圆角 | 知更鸟 +复制链接
关键字: Web前端, 圆角

您可能还会对这些文章感兴趣！

1. IE9、 Firefox、Safari, Chrome的CSS3圆角属性
2. 无图片CSS圆角
3. 用于生成圆角效果的javascript工具集锦
4. jQuery实现网页图片圆角
5. 网页圆角的背景图法
6. 利用CSS Sprites技术 实现网页圆角
7. 网站设计圆角框解决方案
8. 圆角遮罩图片实现图片圆角

目前有 12 条留言 其中：访客:8 条, 博主:2 条 引用: 2

1. dongyang : 2010年04月11日 668 天前 17:10:52  1楼 @回复 回复

   请问博主大人上面的那个示意图是咋弄的啊？很有趣，有空写篇博呗。嘿嘿
   • Boss方 : 2010年04月12日 667 天前 17:10:39 @回复 回复

     做的gif动画哈。
2. 榆树网 : 2010年04月19日 660 天前 21:27:53  2楼 @回复 回复

   你这个站现在咋这么慢的！奇慢！！！
   • 知更鸟 : 2010年04月20日 660 天前 11:40:26 @回复 回复

     最近空间变得不稳定，已解决
     • Agoni : 2011年11月13日 88 天前 10:41:41 @回复 回复

       不会啊，网站速度挺快的。
3. cbj : 2010年11月03日 462 天前 23:49:32  3楼 @回复 回复

   是不是写漏了一些，加上
   

   < b class="lt" > < /b > < b class="lb" >< /b > < b class="rt" > < /b > <b class="rb" > < /b >

   还是说本来css就有这个属性的呢？我还没有见过，求解…
   • 知更鸟 : 2010年11月04日 462 天前 12:56:32 @回复 回复

     被WP自动屏蔽掉了，已补上
4. 绵阳网络建设 : 2011年05月11日 273 天前 21:47:47  4楼 @回复 回复

   在网站建设中要控制好这些细节还是挺不容易的。
5. Deep : 2011年11月25日 75 天前 18:02:49  5楼 @回复 回复

   搞定了
6. Deep : 2011年11月26日 75 天前 12:54:30  6楼 @回复 回复

   请教下，如何控制好父容器，使它的高度为偶数。我做的父DIV高度自适应，有此问题。经查发现，是DIV内的文字 p {line-height:21} ，未定义，自动有此属性的。。。
   如果将 p {line-height:24px}，但内容文字设置字号 18 等岂不是有文字重叠问题了。