用图片作为背景图片实现圆角框实现方法有很多种写法，个人认为下面这个是最好的
<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>圆角</title> <style> .main{ background:url(left.jpg) no-repeat; padding-left:15px; height:31px; float:left; margin-top:200px;} .child{ background:url(right.jpg) no-repeat right #000; padding-right:15px; height:31px; color:#fff; line-height:31px;} </style> </head> <body> <div class="main"> <div class="child">您好，请登录</div> </div> </body> </html>
需要说明的此处的圆角图片不能用png格式的，不然圆角又被填充上颜色了
将图片路径换成你本地图片试试吧，图标素材
效果如下，
当用户名很长实现自适应：
原文：http://www.cnblogs.com/djdliu/p/3968330.html