首页 > 代码库 > 图片圆角宽度自适应最合理的写法
图片圆角宽度自适应最合理的写法
用图片作为背景图片实现圆角框实现方法有很多种写法，个人认为下面这个是最好的
<!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格式的，不然圆角又被填充上颜色了
将图片路径换成你本地图片试试吧，图标素材
效果如下，
当用户名很长实现自适应：
图片圆角宽度自适应最合理的写法
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。