用图片作为背景图片实现圆角框实现方法有很多种写法，个人认为下面这个是最好的
<!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> body, dl, dd, ul, h1, h2, h3, h4, h5, h6, p, form, img {margin:0; padding:0;} body, button, input, select, textarea {font:12px/1.5 tahoma, 'Microsoft YaHei', Arial;} h1, h2, h3, h4, h5, h6 {font-size:100%} em, b { font-style:normal} a{text-decoration:none; outline:none;} a:hover{opacity:0.8;} img {border:0;} input{outline:none;} .hidden {overflow:hidden; text-indent:-999em;} .clearfix{display:block} .clearfix:after{content:".";display:block;height:0;visibility:hidden;clear:both} .clearfix{zoom:1} .none{display:none;} i, em, cite{ font-style: normal; } div,em,p,a,li{font-family:"微软雅黑", Arial, Helvetica, sans-serif,"宋体";} .login_div{ background:url(lt.jpg) no-repeat; padding:0px 0 0 15px; height:32px; position:absolute; top:54px; right:30px; } .land{ background:url(rt.jpg) no-repeat right #74000a; height:32px;font:16px/32px "微软雅黑"; color:#ffc1c1; padding:5px 15px 5px 0; } .land a,.land em{color:#fde21a;} </style> </head> <body style=" background:#9a0917"> <div class="login_div"> <span class="land">你好，请登录账号<a href="javascript:;">【登录】</a></span> <!--<span class="land">你好，<em>Mark<em><a href="javascript:;">【注销】</a></span>--> </div> </body> </html>
需要说明的此处的圆角图片不能用png格式的，不然圆角又被填充上颜色了
将图片路径换成你本地图片试试吧，图标素材
自动收缩效果如下，
当用户名变短实现自适应：