CSS布局实例：仅一张图片实现圆角！

来源：百度文库编辑：神马文学网时间：2024/04/28 20:32:23

CSS布局实例：仅一张图片实现圆角！
Author:52css Data:2007-06-03
字体大小:小中大 [RSS]订阅 |上一篇 |下一篇

这个代码是UDSKY推荐给我的一段用图片版的圆角代码，于是分析代码写个教程，这段代码最大的优点是：只使用了一张图片，代码简单，很容易上手．不足之处在于做这种圆角BOX所在的背景区为单一色！还是直入正题吧！
准备一张图片（我们要使用的那张背景图，四个角都是这张背景图四个部位显示出来的）．最初学习圆角时，我承想过用一张四分之一的圆，然后背景图旋转／翻转不就可以用以用在四个角上了吧，但是CSS中没有这种功能，只好放弃这种不实际的想法！

圆角部分放大图：

HTML代码：

Example Source Code [www.52css.com]

标题

内容

思路：盒子cssbox内放入两个box，上部分box做成两个角（cssbox_head右角，H2左角），下部分box也做一个角的背景图（左角）．cssbox_body内一个右下角．

第一步：
这一步是最简单的，在一个盒子中定义一个右下角的背景图片．
CSS代码

Example Source Code [www.52css.com]
*{
padding:0;
margin:0;
}/*与本教程无关的代码*/
.cssbox{
background: transparent url(http://www.purecss.cn/attachments/month_0706/img.png) no-repeat;
}
.cssbox{
background-position:bottom right;
width:380px;
margin:20px auto;/*与本教程无关的代码*/
}
浏览器中看到的效果见下图：

执行代码：

Source Code to Run [www.52css.com]
[ 可先修改部分代码再运行查看效果 ]
第二步
我们定义右上角的样式，这一步也不难做到，因为定义背景图定义在右上，背景图圆角外部分又不是透明，而是白色，所以白色区盖住cssbox_body的绿色部分．
CSS代码

Example Source Code [www.52css.com]
{
padding:0;
margin:0;
}
.cssbox,.cssbox_head{
background: transparent url(http://www.purecss.cn/attachments/month_0706/img.png) no-repeat;
}
.cssbox{
background-position:bottom right;
width:380px;
margin:20px auto;
}
.cssbox_head{
background-position:top right;
}
浏览器中看到的效果见下图：

Example Source Code [www.52css.com]

xmlns="http://www.w3.org/1999/xhtml">

Untitled Document

{
padding:0;
margin:0;
}
.cssbox,.cssbox_head{
background: transparent url(http://www.purecss.cn/attachments/month_0706/img.png) no-repeat;
}
.cssbox{
background-position:bottom right;
width:380px;
margin:20px auto;
}
.cssbox_head{
background-position:top right;
}

标题

内容