<p >　　这个代码是UDSKY推荐给我的一段用图片版的圆角代码，于是分析代码写个教程，这段代码最大的优点是：只使用了一张图片，代码简单，很容易上手．不足之处在于做这种圆角BOX所在的背景区为单一色！还是直入正题吧！<br /> <br /> 　　准备一张图片（我们要使用的那张背景图，四个角都是这张背景图四个部位显示出来的）．最初学习圆角时，我承想过用一张四分之一的圆，然后背景图旋转／翻转不就可以用以用在四个角上了吧，但是CSS中没有这种功能，只好放弃这种不实际的想法！</p> <div align="center" ><img alt="网页制作实例CSS用一张图片实现圆角" onclick="javascript:window.open(this.src);" onload="return imgzoom(this,600);" src="/up_pic/201211/200777202328126.png" /></div> <p >圆角部分放大图：</p> <div align="center" ><img alt="网页制作实例CSS用一张图片实现圆角" onclick="javascript:window.open(this.src);" onload="return imgzoom(this,600);" src="/up_pic/201211/200777202329287.gif" /></div> <p >HTML代码：</p> <p >　　思路：盒子cssbox内放入两个box，上部分box做成两个角（cssbox_head右角，H2左角），下部分box也做一个角的背景图（左角）．cssbox_body内一个右下角．</p> <div align="center" ><img alt="网页制作实例CSS用一张图片实现圆角" onclick="javascript:window.open(this.src);" onload="return imgzoom(this,600);" src="/up_pic/201211/200777202329313.gif" /></div> <p ><span >第一步：</span><br /> 　　这一步是最简单的，在一个盒子中定义一个右下角的背景图片．<br /> 　　CSS代码</p> <div class="code" >*{<br /> padding:0;<br /> margin:0;<br /> }/*与本教程无关的代码*/<br /> .cssbox{<br /> background:transparenturl(/up_pic/201211/200777202328126.png)no-repeat;<br /> }<br /> .cssbox{<br /> background-position:bottomright;<br /> width:380px;<br /> margin:20pxauto;/*与本教程无关的代码*/<br /> }</div> <p >　　浏览器中看到的效果见下图：</p> <div align="center" ><img alt="网页制作实例CSS用一张图片实现圆角" onclick="javascript:window.open(this.src);" onload="return imgzoom(this,600);" src="/up_pic/201211/200777202329359.gif" /></div> <p >　　执行代码：</p> <p align="center" ><textarea class="fm" cols="78" id="code1" rows="17" ></textarea></p>