网页制作实例CSS用一张图片实现圆角

XML入门教程-XML DHTML 行为

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

大 | 中 | 小

[2007/06/30 21:45 | 分类: Html技术 | by gdgzboy ]

[此文来源于互联网，牛C网只负责收集整理]

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

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

圆角部分放大图：

HTML代码：

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

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

*{
padding:0;
margin:0;
}/*与本教程无关的代码*/
.cssbox{
background: transparent url(/attachment/Image/200841216143679277801.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(/attachment/Image/200841216143679277801.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></div></P><P><INPUT style="CURSOR: hand" onfocus=this.blur() onclick="runEx('code1')" type=button value=运行代码> <INPUT style="WIDTH: 95px; CURSOR: hand" onfocus=this.blur() onclick=cycode(code1) type=button value=复制到剪贴板 name=Submit> <INPUT style="CURSOR: hand" onfocus=this.blur() onclick=svcode(code1) type=button value=另存代码> </P><P><SPAN style="COLOR: blue">第二步</SPAN><BR>　　我们定义右上角的样式，这一步也不难做到，因为定义背景图定义在右上，背景图圆角外部分又不是透明，而是白色，所以白色区盖住cssbox_body的绿色部分．<BR>　　CSS代码</P><DIV class=code>{<BR> padding:0;<BR> margin:0;<BR>}<BR>.cssbox,.<SPAN style="COLOR: red">cssbox_head</SPAN>{ <BR> background: transparent url(/attachment/Image/200841216143679277801.png) no-repeat;<BR>}<BR>.cssbox{<BR> background-position:bottom right;<BR> width:380px;<BR> margin:20px auto;<BR>}<BR><SPAN style="COLOR: red">.cssbox_head{<BR> background-position:top right;<BR>}</SPAN></DIV><P>　　浏览器中看到的效果见下图：</P><DIV align=center><IMG alt=网页制作实例CSS用一张图片实现圆角 src="/attachment/Image/200841216143694877805.gif"></DIV><DIV class=code><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"><BR><HTML <BR>xmlns="http://www.w3.org/1999/xhtml"><BR><HEAD><BR><TITLE>Untitled Document</TITLE><BR><META http-equiv=Content-Type content="text/html; charset=utf-8"><BR><STYLE type=text/css><BR>{<BR> padding:0;<BR> margin:0;<BR>}<BR>.cssbox,.cssbox_head{ <BR> background: transparent url(/attachment/Image/200841216143679277801.png) no-repeat;<BR>}<BR>.cssbox{<BR> background-position:bottom right;<BR> width:380px;<BR> margin:20px auto;<BR>}<BR>.cssbox_head{<BR> background-position:top right;<BR>}<BR><BR></STYLE><BR><META content="MSHTML 6.00.2900.2995" name=GENERATOR><BR></HEAD><BR><BODY><BR><DIV class=cssbox><BR> <DIV class=cssbox_head><BR> <H2>标题</H2><BR> </DIV><BR> <DIV class=cssbox_body><BR> <P>内容</P><BR> </DIV><BR></DIV><BR></BODY><BR></HTML><BR></DIV><P><SPAN style="COLOR: blue">第三步</SPAN><BR>　　经过以上的两步我们已经做了出两个角了，在接着做第三个角，定义在H2中也就是左上角．为了美观一些，我们在H2中加入补白10PX,<BR>　　CSS代码</P><DIV class=code>{<BR> padding:0;<BR> margin:0;<BR>}<BR>.cssbox,.cssbox_head,.<SPAN style="COLOR: red">cssbox_head h2</SPAN>{ <BR> background: transparent url(/attachment/Image/200841216143679277801.png) no-repeat;<BR>}<BR>.cssbox{<BR> background-position:bottom right;<BR> width:380px;<BR> margin:20px auto;<BR>}<BR>.cssbox_head{<BR> background-position:top right;<BR>}<BR><SPAN style="COLOR: red">.cssbox_head h2{ <BR> background-position:top left;<BR> margin:0;<BR> padding:10px; <BR>}</SPAN></DIV><P>　　执行代码：</P><P align=center><TEXTAREA class=fm id=code2 style="WIDTH: 490px; HEIGHT: 256px" rows=17 cols=78><!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{ background: transparent url(/attachment/Image/200841216143679277801.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; padding: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></div></P><P><INPUT style="CURSOR: hand" onfocus=this.blur() onclick="runEx('code2')" type=button value=运行代码> <INPUT style="WIDTH: 95px; CURSOR: hand" onfocus=this.blur() onclick=cycode(code2) type=button value=复制到剪贴板 name=Submit> <INPUT style="CURSOR: hand" onfocus=this.blur() onclick=svcode(code2) type=button value=另存代码> </P><DIV align=center><IMG alt=网页制作实例CSS用一张图片实现圆角 src="/attachment/Image/200841216143698077806.gif"></DIV><P>　　疑点：奇怪了，为什么实际上并不是我们想要的效果？我们在看一下问题出在哪，应该是我们定义的第三个角的背景图盖住了右上cssbox_head中的角，解决的方法有两种：<BR>　　第一种：H2可以加一个右边界这样H2的背景就不会在盖住cssbox_head的的那个角了；<BR>　　第二种：反向思维，cssbox_head中加入一个右补白，这样H2中的背景图也不会盖住cssbox_head中的角；<BR>　　这里我们选用第二种方法．</P><DIV class=code>.cssbox_head{<BR> background-position:top right;<BR><SPAN style="COLOR: red"> padding-right:10px;</SPAN><BR>}<BR>.cssbox_head h2{ <BR> background-position:top left;<BR> padding:10px <SPAN style="COLOR: red">0</SPAN> 10px 10px; <BR>}</DIV><P>　　执行代码：</P><P align=center><TEXTAREA class=fm id=code3 style="WIDTH: 490px; HEIGHT: 256px" rows=17 cols=78><!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{ background: transparent url(/attachment/Image/200841216143679277801.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; }</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></div></P><P><INPUT style="CURSOR: hand" onfocus=this.blur() onclick="runEx('code3')" type=button value=运行代码> <INPUT style="WIDTH: 95px; CURSOR: hand" onfocus=this.blur() onclick=cycode(code3) type=button value=复制到剪贴板 name=Submit> <INPUT style="CURSOR: hand" onfocus=this.blur() onclick=svcode(code3) type=button value=另存代码> </P><DIV align=center><IMG alt=网页制作实例CSS用一张图片实现圆角 src="/attachment/Image/20084121614372677807.gif"></DIV><P><SPAN style="COLOR: blue">第四步</SPAN><BR>　　这一步和第三步很相似，这里就不会在犯错误了，根据实际情况只能选用第一种方法．<BR>　　css代码</P><DIV class=code>*{<BR> padding:0;<BR> margin:0;<BR>}<BR>.cssbox,.cssbox_head,.cssbox_head h2,.<SPAN style="COLOR: red">cssbox_body</SPAN>{ <BR> background: transparent url(/attachment/Image/200841216143679277801.png) no-repeat;<BR>}<BR>.cssbox{<BR> background-position:bottom right;<BR> width:380px;<BR> margin:20px auto;<BR>}<BR>.cssbox_head{<BR> background-position:top right;<BR> padding-right:10px;<BR>}<BR>.cssbox_head h2{ <BR> background-position:top left;<BR> padding:10px 0 10px 10px; <BR>}<BR><SPAN style="COLOR: red">.cssbox_body{ <BR> background-position:bottom left; <BR> margin-right:10px; /* interior-padding right */ <BR> padding:0px 0 10px 10px;<BR>}</SPAN></DIV><P>　　完整的代码：</P><P align=center><TEXTAREA class=fm id=code4 style="WIDTH: 490px; HEIGHT: 256px" rows=17 cols=78><!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(/attachment/Image/200841216143679277801.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></div></P><P><INPUT style="CURSOR: hand" onfocus=this.blur() onclick="runEx('code4')" type=button value=运行代码> <INPUT style="WIDTH: 95px; CURSOR: hand" onfocus=this.blur() onclick=cycode(code4) type=button value=复制到剪贴板 name=Submit> <INPUT style="CURSOR: hand" onfocus=this.blur() onclick=svcode(code4) type=button value=另存代码> </P>最终效果图<BR><BR><DIV align=center><IMG alt=网页制作实例CSS用一张图片实现圆角 src="/attachment/Image/20084121614375877808.gif"></DIV><BR><BR>　　终于完成我们的＂大作＂了！从上面我们可以看出，定义这种效果的样式是先从父元素到子元素定义的，也就是从外层向内层定义，这是因为，越是内层的的图／背景，它在显示时确是在外层的．<BR>　　在内容区如果P或其它元素有边界的情况下会出现边界叠加现象，在这里只要给cssbox_body加入一个1PX下补白就可以解决这种问题的发生，关于边界叠加见网站中＜边界叠加＞这篇文章．</div>

作者：gdgzboy@牛C网
地址：http://www.niuc.net/post/3606/
版权所有。转载时必须以链接形式注明作者和原始出处及本声明！