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

教程Tag：暂无Tag,欢迎添加,赚取U币!

缂傚倸鍊风粈浣该洪敃鍌氱劵缂佲偓閹辩eCMS闂佽崵鍠愰悷銉ノ涘┑瀣ㄢ偓鍌炲醇閺囩偞鐎┑鐐叉閸ㄧ喖寮婚敓锟�濠电偞鍨跺瑙勭珶閸℃稑鐓橀柡宥庡幗閳锋帡鏌ㄩ悤鍌涘 缂傚倷绀侀ˇ閬嶅窗閹邦剨鑰块柛銉墮缁€澶愭煃閵夈劍鐝柣婵撴嫹闂傚倷绶￠崑鍕囨潏鈺冪濠㈣泛鏈崗婊堟煛閸ャ劍鐨戦梻澶婄Ч閺屻倖娼忛妸锔绘缂備焦鍞婚幏锟� 闂備礁鎼崯鐗堟叏閹绢喖妞介柡宥庡亞閸楁碍绻涢崱妯诲鞍婵絾鍔楅埀顒冾潐閹爼宕曢柆宥呯煑闁跨噦鎷�,闂備浇鐨崟顐㈠Б闁诲氦顫夋繛濠傤嚕閸洖绀冩い鏂垮悑椤忕喐绻涢幋鐐村皑闁稿鎹囧鍝勨枎閹勭亪闂佸憡鐟ョ换妯侯嚕婵犳碍鏅搁柨鐕傛嫹!

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

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

圆角部分放大图：

HTML代码：

示例代码 [www.mb5u.com]

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

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

示例代码 [www.mb5u.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;/*与本教程无关的代码*/
}

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

　　执行代码：

代码调试框 [www.mb5u.com]

[ 可先修改部分代码再运行查看效果 ]

第二步
　　我们定义右上角的样式，这一步也不难做到，因为定义背景图定义在右上，背景图圆角外部分又不是透明，而是白色，所以白色区盖住cssbox_body的绿色部分．
　　CSS代码

示例代码 [www.mb5u.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;
}

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

示例代码 [www.mb5u.com]

<!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,.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;
}

</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>

第三步
　　经过以上的两步我们已经做了出两个角了，在接着做第三个角，定义在H2中也就是左上角．为了美观一些，我们在H2中加入补白10PX,
　　CSS代码

示例代码 [www.mb5u.com]

{
padding:0;
margin:0;
}
.cssbox,.cssbox_head,.cssbox_head h2{
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;
}
.cssbox_head h2{
background-position:top left;
margin:0;
padding:10px;
}

　　执行代码：

代码调试框 [www.mb5u.com]

[ 可先修改部分代码再运行查看效果 ]

　　疑点：希奇了，为什么实际上并不是我们想要的效果？我们在看一下问题出在哪，应该是我们定义的第三个角的背景图盖住了右上cssbox_head中的角，解决的方法有两种：
　　第一种：H2可以加一个右边界这样H2的背景就不会在盖住cssbox_head的的那个角了；
　　第二种：反向思维，cssbox_head中加入一个右补白，这样H2中的背景图也不会盖住cssbox_head中的角；
　　这里我们选用第二种方法．

示例代码 [www.mb5u.com]

.cssbox_head{
background-position:top right;
padding-right:10px;
}
.cssbox_head h2{
background-position:top left;
padding:10px 0 10px 10px;
}

　　执行代码：

代码调试框 [www.mb5u.com]

[ 可先修改部分代码再运行查看效果 ]

第四步
　　这一步和第三步很相似，这里就不会在犯错误了，根据实际情况只能选用第一种方法．
　　css代码

示例代码 [www.mb5u.com]

*{
padding:0;
margin:0;
}
.cssbox,.cssbox_head,.cssbox_head h2,.cssbox_body{
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;
padding-right:10px;
}
.cssbox_head h2{
background-position:top left;
padding:10px 0 10px 10px;
}
.cssbox_body{
background-position:bottom left;
margin-right:10px; /* interior-padding right */
padding:0px 0 10px 10px;
}

　　完整的代码：

代码调试框 [www.mb5u.com]

<!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,.cssbox_head,.cssbox_head h2,.cssbox_body{ 
	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;
	padding-right:10px;
}
.cssbox_head h2{ 
	background-position:top left;
	margin:0;
	padding:10px 0 10px 10px; 
}
.cssbox_body{ 
	background-position:bottom left; 
	margin-right:10px; /* interior-padding right */ 
	padding:0px 0 10px 10px;
}
</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>

[ 可先修改部分代码再运行查看效果 ]

最终效果图

　　终于完成我们的＂大作＂了！从上面我们可以看出，定义这种效果的样式是先从父元素到子元素定义的，也就是从外层向内层定义，这是因为，越是内层的的图／背景，它在显示时确是在外层的．
　　在内容区假如P或其它元素有边界的情况下会出现边界叠加现象，在这里只要给cssbox_body加入一个1PX下补白就可以解决这种问题的发生，关于边界叠加见网站中＜边界叠加＞这篇文章．
　　本文作者：purecss