一张图片就能实现圆角？是什么样的图片？怎样实现？
其实这张图片是一个小圆圈，如下面的例子将要使用的图片为 10 * 10 大小的图片： ，太小了是吧，不过已经够了。
基本思路
准备四个小容器，分别放小圆圈图片的左上、右上、左下、右下四个部分，然后再分别定位到父容器的四个角上。
图片示意：
代码实现
XHTML代码：
- <div id="container">
- <h1>一张图片实现圆角</h1>
- <b class="lt"></b>
- <b class="rt"></b>
- <b class="lb"></b>
- <b class="rb"></b>
- </div>
四个 b 为小容器，不要管它们，放上去就是了。
CSS代码：
- *{
- margin:0;
- padding:0;
- }
- #container{
- position:relative;
- margin:20px auto;
- padding:20px;
- width:400px;
- height:50px;
- border:1px solid #000;
- }
- b{
- position:absolute;
- width:5px;
- height:5px;
- font-size:0;
- background-image:url(images/yuan8.jpg);
- background-repeat:no-repeat;
- }
- .lt{
- left:-1px;
- top:-1px;
- background-position:left top;
- }
- .rt{
- rightright:-1px;
- top:-1px;
- background-position:rightright top;
- }
- .lb{
- left:-1px;
- bottombottom:-1px;
- background-position:left bottombottom;
- }
- .rb{
- rightright:-1px;
- bottombottom:-1px;
- background-position:bottombottom rightright;
- }
- h1{
- text-align:center;
- font-size:24px;
- }
这种方法似乎很完美，但遗憾的是：如果父容器（本例为 #container）的高度为基数时，在 IE6 里下方会出现一条横线，如下图：
所以，如果使用这种方法，就要控制好父容器，使它的高度为偶数。
另外：由于 IE 默认行高，b{height:5px} 会没有效果，所以加上了 font-size:0 消除了这个 bug ，虽然 overflow:hidden 也可以消除这个 bug ，但本例中不适合用这种方法，否则在 IE 中下半部分的圆角会没有效果或效果不完美
本站文章大部分为原创，用于个人学习记录，可能对您有所帮助，仅供参考！
我的微信
微信号已复制
版权声明
本站原创文章转载请注明文章出处及链接，谢谢合作！
吉林省长春市 1F
请问博主大人上面的那个示意图是咋弄的啊？很有趣，有空写篇博呗。嘿嘿
湖北省武汉市 B1
@ dongyang 做的gif动画哈。
吉林省长春市榆树市 2F
你这个站现在咋这么慢的！奇慢！！！
中国 B1
@ 榆树网 最近空间变得不稳定，已解决
广东省 B2
@ 知更鸟 不会啊，网站速度挺快的。
广东省肇庆市 3F
是不是写漏了一些，加上 < b class=”lt” > < /b > < b class=”lb” >< /b > < b class=”rt” > < /b > <b class=”rb” > < /b > 还是说本来css就有这个属性的呢？我还没有见过，求解…
中国 B1
@ cbj 被WP自动屏蔽掉了，已补上
广东省惠州市 4F
在网站建设中要控制好这些细节还是挺不容易的。
湖南省郴州市 5F
搞定了
湖南省郴州市 6F
请教下，如何控制好父容器，使它的高度为偶数。我做的父DIV高度自适应，有此问题。经查发现，是DIV内的文字 p {line-height:21} ，未定义，自动有此属性的。。。
如果将 p {line-height:24px}，但内容文字设置字号 18 等岂不是有文字重叠问题了。
上海市 7F
推荐各位使用 html9patch（Android 9patch图的html版本），非常给力
https://github.com/kimseongrim/html9patch
广东省湛江市 8F
图片圆角，和主题相适应。
来自外部的引用