图片圆角宽度自适应最合理的写法

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

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

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

效果如下，

当用户名很长实现自适应：

时间： 2024-11-10 02:38:47

图片圆角宽度自适应最合理的写法的相关文章

手机网页宽度，图片宽度自适应

网页宽度页面box不要写宽度或 width:100% 之类的去掉头部加上下面代码: <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" /> 图片宽度 <script type="text/javascript"> f

图片超过DIV宽度自适应

.main_con img { max-width: 610px; height: auto; cursor: pointer; border: 0px double #cccccc; padding: 2px; zoom: expression( function(elm) { if (elm.width>610) { var oldVW = elm.width; elm.width=610; elm.height = elm.height*(610 /oldVW); } elm.style.

抛砖引玉之宽度自适应布局

抛砖引玉之宽度自适应布局什么是宽度自适应布局呢? 就是当浏览器窗口大小改变时,浏览器里的元素宽度也随之改变,从而达到自适应布局. 常见的宽度自适应布局有: 1. 两列:左边宽度不变,右边宽度自适应 2. 三列:左右两边宽度不变,中间部分自适应 3. 三列:左右两边宽度自适应,中间部分不变一.利用div+css实现以上“自适应布局” (1)两列:左边宽度固定,右边宽度自适应利用div+float+margin,已在随笔‘float剖析’中讲解,具体代码和效果图见下: <!DOCTYPE

我熟知的三种三栏网页宽度自适应布局方法

一.前言在如今各个分辨率显示器N足鼎立的时期,页面采用流动性布局(亦可称自适应布局)不失为一个好选择.当然,具体实现不是那么容易,需要一定的css功力和实践经验.本文不讲细节,只讲外部的自适应架构,这也是实现整个页面自适应的前提.目前为止,我所熟知的左中右三栏宽度自适应于浏览器的方法有三个:绝对定位法,margin负值法以及自身浮动法.这些方法简洁实用,且无兼容性问题.如果您想在您的页面上使用流动性布局,相信本文给您一些启示的. 二.三种方法为了演示的需要,首先限定下示例的布局结构:左中右三栏布

我的小前端（3）—— 移动端特殊效果-让页面宽度自适应

没有什么特别新技术,就是记录我做移动端遇到的问题 2016-02-16 移动端的页面宽度不固定,让页面宽度自适应的方法: 1.直接属性赋值,页面宽度不固定[我常用第一个] <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 2.页面DIV宽度固定320内,由JS控制缩放.[如果页面太宽,比例变了.个人

IOS UIWebView截获html并修改便签内容,宽度自适应

需求:混合应用UIWebView打开html后,UIWebView有左右滚动条,要去掉左右滚动效果: 方法:通过js截获UIWebView中的html,然后修改html标签内容: 实例代码: 服务器端html Java代码 <html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="

图片的css自适应

当需要css来缩放图片的时候,可以采用外层容器100%或者任意百分比, 内层图片img tag 没有宽高,用sass写经过断点后的mixin中的样式就是这样: .workscon_section{ width: 100%; .left_art{ width: 100%; display: block; float: left; text-align: center; img{ border: 0 none; height: auto; max-width: 92%; margin: 1px 0;

CSS-父元素宽度自适应子元素宽度之和

最近碰见这样一个需求,要让图片横向排列设置x方向的滚动条滚动查看,原本当直接创建一个IFC(inline,float什么的)就解决了,搞了半天发现搞不定(IFC也是不能父元素宽度自适应子元素宽度之和的,因为会换行..),最后用flex解决了(然后又发现使用table也是可以的),然后学了两个新名词GFC和FFC..这里就说一下我的解决方法,给大家抛个砖. flex <style> /*1. 最外层容器 width: 200px; overflow-x: scroll; */ .img-view

wpf 设置图片圆角

设置页面布局的时候.遇到了设置图片圆角问题,然后试了几种方法,都可以第一种: <Border CornerRadius="50" BorderBrush="Blue" BorderThickness="2" Width="200" Height="200"> <Border.Background> <ImageBrush ImageSource="\pj\123.j