　　这个代码是UDSKY推荐给我的一段用图片版的圆角代码，于是分析代码写个教程，这段代码最大的优点是：只使用了一张图片，代码简单，很容易上手．不足之处在于做这种圆角BOX所在的背景区为单一色！还是直入正题吧！

　　准备一张图片（我们要使用的那张背景图，四个角都是这张背景图四个部位显示出来的）．最初学习圆角时，我承想过用一张四分之一的圆，然后背景图旋转／翻转不就可以用以用在四个角上了吧，但是CSS中没有这种功能，只好放弃这种不实际的想法！

圆角部分放大图：

HTML代码：

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

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

*{
padding:0;
margin:0;
}/*与本教程无关的代码*/
.cssbox{
background: transparent url(http://www.webjx.com/upfiles/20070630/20070630213028_01.png) no-repeat;
}
.cssbox{
background-position:bottom right;
width:380px;
margin:20px auto;/*与本教程无关的代码*/
}

　　浏览器中看到的效果见下图：

　　执行代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <HTML xmlns="http://www.w3.org/1999/xhtml"> <HEAD> <TITLE>Untitled Document</TITLE> <META http-equiv=Content-Type content="text/html; charset=utf-8"> <STYLE type=text/css> *{ padding:0; margin:0; } .cssbox{ background: transparent url(http://www.webjx.com/upfiles/20070630/20070630213028_01.png) no-repeat; } .cssbox{ background-position:bottom right; width:380px; margin:20px auto; } </STYLE> <META content="MSHTML 6.00.2900.2995" name=GENERATOR> </HEAD> <BODY> <DIV class=cssbox> <DIV class=cssbox_head> <H2>标题</H2> </DIV> <DIV class=cssbox_body> <P>内容</P> </DIV> </DIV> </BODY> </HTML>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

第二步

[1] [2] [3] [4] [5] [6] 下一页

上一篇:问题解决:无法载入MYSQL扩展，请检查PHP配置

下一篇:用CSS打造一个超酷的具有立体感效果的导航