圆角框的实现

来源：互联网发布：苏州加工中心编程招聘编辑：程序博客网时间：2024/05/09 18:28

（一）固定宽度的圆角框

1）需要使用两个切好的图像：一个图像用于框的顶部，另外一个用于框的底部。示例如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>Rounded corner box using background images</title><style type="text/css">html,body,h2,p{margin:0;padding:0}h2{font-size:100%}.box{width:418px;background: #effce7 url(img/bottom.gif) left bottom no-repeat;padding-bottom:10px;font:12px Arial;margin:0 auto;}.box h2 {background:url(img/top.gif) no-repeat left top;padding:20px 20px 0 20px;margin-top:0;font-size:18px;}.box p{padding:0 20px;}</style></head><body><div class="box"><h2>My Rounded Corner Box</h2><p>This is my rounded corner box. Isn't it spiffing! I think it's the best rounded corner box in the world. I mean, look at those corners. How round are they? Now take a look at the mark-up. That's right, no extraneous div's. Just pure HTML goodness. Sexy huh? I bet you're wondering how I did that? Well it's easy with CSS 3. You simply use multiple background images. </p></div></body></html>

结果显示：

2）上述例子中设置了框的背景颜色，下述示例中使用背景图像代替

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>Rounded corner box using background images</title><style  type="text/css">html,body,h2,p{margin:0;padding:0}h2{font-size:100%}.box{width:424px;background:url(img/tile2.gif) repeat-y;  //使用背景图片代替背景颜色font:12px Arial;margin:0 auto;}.box h2 {background:url(img/top2.gif) no-repeat left top;padding:20px 20px 0 20px;font-size:18px;}.box p{background:url(img/bottom2.gif) no-repeat left bottom;padding:0 20px 20px 20px;}</style></head><body><div class="box"><h2>My Rounded Corner Box</h2><p>This is my rounded corner box. Isn't it spiffing! I think it's the best rounded corner box in the world. I mean, look at those corners. How round are they? Now take a look at the mark-up. That's right, no extraneous div's. Just pure HTML goodness. Sexy huh? I bet you're wondering how I did that? Well it's easy with CSS 3. You simply use multiple background images. </p></div></body></html>

没有给框设置高度，会随着文本尺寸的增加进行垂直扩展。结果显示：

（二）灵活的圆角框

上述两例中因框的宽度必须与顶部和底部图像的宽度一致，不能进行水平扩展。不使用一个图像组成顶部和底部曲线，而使用两个相互重叠的图像。先上示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>Rounded corner box using background images</title><style  type="text/css">html,body,div,h2,p{margin:0;padding:0}h2{font-size:100%}.box{width:40em;background: #effce7 url(img/bottom-left.gif) left bottom no-repeat;font:12px Arial;margin:0 auto;}.box-outer{background:url(img/bottom-right.gif) no-repeat right bottom;padding-bottom:1em;}.box-inner{background:url(img/top-left.gif) no-repeat left top;}.box h2 {background:url(img/top-right.gif) no-repeat right top;padding:1em 1em 0 1em;}.box p{padding:0 1em;}</style></head><body><div class="box"><div class="box-outer"><div class="box-inner"><h2>My Rounded Corner Box</h2><p>This is my rounded corner box. Isn't it spiffing! I think it's the best rounded corner box in the world. I mean, look at those corners. How round are they? Now take a look at the mark-up. That's right, no extraneous div's. Just pure HTML goodness. Sexy huh? I bet you're wondering how I did that? Well it's easy with CSS 3. You simply use multiple background images. </p></div></div></div></body></html>

使用4个图像：两个顶部图像组成顶部曲线，两个底部图像组成底部曲线的框的主体，因此，底部图像的高度必须与框的最大高度相同。随着框尺寸增大，大图像有更多的部分显露出来，实现框扩展的效果。
上例中添加了两个额外的无语义的元素是不理想的。显示结果：

参考：《精通CSS》

文章中代码下载：点击打开链接