兼容所用浏览器图片圆角宽度自适应最合理的写法

用图片作为背景图片实现圆角框实现方法有很多种写法,个人认为下面这个是最好的

<!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格式的,不然圆角又被填充上颜色了

将图片路径换成你本地图片试试吧,图标素材  

自动收缩效果如下,

当用户名变短实现自适应:

你可能感兴趣的:(浏览器)