这个代码是UDSKY推荐给我的一段用图片版的圆角代码,于是分析代码写个教程,这段代码最大的优点是:只使用了一张图片,代码简单,很容易上手.不足之处在于做这种圆角BOX所在的背景区为单一色!还是直入正题吧!
准备一张图片(我们要使用的那张背景图,四个角都是这张背景图四个部位显示出来的).最初学习圆角时,我承想过用一张四分之一的圆,然后背景图旋转/翻转不就可以用以用在四个角上了吧,但是CSS中没有这种功能,只好放弃这种不实际的想法!
圆角部分放大图:
HTML代码:
Example Source Code
[www.52css.com]<DIV class=cssbox>
<DIV class=cssbox_head>
<H2>标题</H2>
</DIV>
<DIV class=cssbox_body>
<P>内容</P>
</DIV>
</DIV>
思路:盒子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;/*与本教程无关的代码*/
}
浏览器中看到的效果见下图:
执行代码:
第二步 我们定义右上角的样式,这一步也不难做到,因为定义背景图定义在右上,背景图圆角外部分又不是透明,而是白色,所以白色区盖住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]<!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代码
Example Source Code
[www.52css.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;
}
执行代码:
疑点:奇怪了,为什么实际上并不是我们想要的效果?我们在看一下问题出在哪,应该是我们定义的第三个角的背景图盖住了右上cssbox_head中的角,解决的方法有两种:
第一种:H2可以加一个右边界这样H2的背景就不会在盖住cssbox_head的的那个角了;
第二种:反向思维,cssbox_head中加入一个右补白,这样H2中的背景图也不会盖住cssbox_head中的角;
这里我们选用第二种方法.
Example Source Code
[www.52css.com].cssbox_head{
background-position:top right;
padding-right:10px;
}
.cssbox_head h2{
background-position:top left;
padding:10px 0 10px 10px;
}
执行代码:
第四步 这一步和第三步很相似,这里就不会在犯错误了,根据实际情况只能选用第一种方法.
css代码
Example Source Code
[www.52css.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;
}
完整的代码:
最终效果图
终于完成我们的"大作"了!从上面我们可以看出,定义这种效果的样式是先从父元素到子元素定义的,也就是从外层向内层定义,这是因为,越是内层的的图/背景,它在显示时确是在外层的.
在内容区如果P或其它元素有边界的情况下会出现边界叠加现象,在这里只要给cssbox_body加入一个1PX下补白就可以解决这种问题的发生,关于边界叠加见网站中<边界叠加>这篇文章.
本文作者:purecss