做网站的都知道做圆角框是个非常麻烦的事，切要4张图片，一旦要改圆角样式就更麻烦了，
今天就来学习怎么用一张图片来定义圆角边框吧！
运行代码框<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title></title> <style type="text/css"> /*<![CDATA[*/ .lt { clear: both; background-position: left -6px; margin: -1px 0px 0px -1px; } .lb { clear: both; background-position: left -9px; margin: 0px 0px -1px -1px; } .rt { background-position: right 0px; margin: 0px -1px 0px 0px; } .rb { background-position: right -3px; margin: 0px -1px 0px 0px; } .lt { clear: both; background-position: left -6px; margin: -1px 0px 0px -1px;} .lb { clear: both; background-position: left -9px; margin: 0px 0px -1px -1px; } .rt { background-position: right 0px; margin: 0px -1px 0px 0px; } .rb { background-position: right -3px; margin: 0px -1px 0px 0px; } #my { border: #7B9EBD 1px solid; margin: 5px 0px 10px; width: 20%; } #my .lt { display: block; font-size: 1px; background-image: url(http://www.w3css.com/img/angle-deep.gif); width: auto; background-repeat: no-repeat; width: auto; position: relative; height: 3px; } #my .rt { display: block; font-size: 1px; background-image: url(http://www.w3css.com/img/angle-deep.gif); width: auto; background-repeat: no-repeat; position: relative; height: 3px; } #my .lb { display: block; font-size: 1px; background-image: url(http://www.w3css.com/img/angle-deep.gif); width: auto; background-repeat: no-repeat; position: relative; height: 3px; } #my .rb { display: block; font-size: 1px; background-image: url(http://www.w3css.com/img/angle-deep.gif); width: auto; background-repeat: no-repeat; position: relative; height: 3px; } /*]]>*/ </style> </head> <body> <div id="my"><span class="lt"><span class="rt"></span></span> <div><a href="">WEB标准交流</a></br><a href="WEB''>http://www.w3css.com">WEB标准交流</a></div> <span class="lb"><span class="rb"></span></span></div><!--my--> </body> </html> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
