CSS实现自适应的图片背景边框代码

代码简介：

CSS漂亮的图片边框，边框是用背景图片修饰的，不过可以自适应大小，这点挺实用的，不论你的图片有多大，它始终显示在图片的外围，不会错位，这当然还要归功于CSS的功劳。

代码内容：

View Code

<html>
<head>
<title>CSS实现自适应的图片背景边框代码_网页代码站(www.webdm.cn)</title>
<style type="text/css">
body{
text-align:center;
margin-top:100px;
}
.in{
border:1px solid #666;
padding:4px;
}
.out{
float:left;
background:url("http://www.webdm.cn/images/20090930/tr.gif") no-repeat right top;

}
.mir{
background:url("http://www.webdm.cn/images/20090930/rb.gif") no-repeat right bottom;
padding:10px;
padding-bottom:0;
padding-left:0;
}
.mil{
background:url("http://www.webdm.cn/images/20090930/l.gif") no-repeat left top;
}
</style>
</head>
<body>
<div class='out'>
<div class='mil'>
<div class='mir'>
<div class='in'>
<img src='http://www.webdm.cn/images/20090930/1.jpg' />
</div>
</div>
</div>
</div>
<div class='out'>
<div class='mil'>
<div class='mir'>
<div class='in'>
<img src='http://www.webdm.cn/images/20090930/11.jpg' />
</div>
</div>
</div>
</div>
</body>
</html>
<br />
<p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码！</p>
代码来自：http://www.webdm.cn/webcode/85af318f-1215-4549-b980-48587d04b862.html

转载于:https://www.cnblogs.com/webdm/archive/2011/08/08/2130643.html

CSS实现自适应的图片背景边框代码相关推荐

CSS，点击去除虚线边框代码
/*CSS,点击去除虚线边框代码*/ a {outline: none;} a:active {star:expression(this.onFocus=this.blur());} :focus { ...
html语言加图片,html代码——给图片加边框代码
图片加边框代码这里教大家只需用html代码就能给你的图片加出各种漂亮的相框,使用方法,点"<>"加入代码,换上你的图片网址,适当调整宽度和颜色,就可以让你的图片锦上添 ...
自适应随机图片背景导航页源码
介绍: 无后门,源码内有查毒图,简单操作,下载上传主机服务器就可以了自适应小姐姐导航源码 ①:使用note++将源码内的链接及相关信息改成你的 ②: 修改完成后将源码上传至虚拟主机或服务器 ③:上传 ...
css当鼠标放到图片加边框的效果
<head><meta charset="utf-8" /><title></title><style type=" ...
php背景特效代码,JS和CSS实现渐变背景特效的代码
这篇文章主要介绍了JS和CSS实现的漂亮渐变背景特效代码,包含6个渐变效果,涉及JavaScript针对页面元素属性动态操作的相关技巧,需要的朋友可以参考下本文实例讲述了JS+CSS实现的漂亮渐变背 ...
10款js图片代码_图片滚动代码_图片切换代码_图片特效代码_图片轮播代码（二）
js电影图片滑动放大展示特效 jQuery列表图片全图滚动预览 jQuery游戏图片手风琴切换代码响应式图片文字横幅布局代码 swiper新闻大图滚动组合特效 swiper图文标题滚动轮播特效 js ...
css里面设置一个背景边框图片或者填充一张图片，使图片填充整个div容器；
一.就一个div,设置其背景图片 1.背景图片 2.代码 #left-bottom {/*height: 31%;*/height: 38%;margin-top: 25px;position: re ...
HTML5+CSS3-边框背景图、多背景图、CSS选择器、网络字体、边框背景图片、过渡、放大、旋转
边框背景图片 1. background-origin:设置背景图片的起始原点 background-origin:border-box;------背景图片从边框开始显示 background-o ...
CSS:头部导航设置复杂背景图片自适应显示（与menu菜单贴合-自用）
[2021/07/06] 更新第二种方式,目前已在项目上应用采用padding-top百分比的方法,具体操作如下: 1.计算padding-top值(例如图片宽1920,高1080) padding ...

CSS实现自适应的图片背景边框代码

CSS实现自适应的图片背景边框代码相关推荐

最新文章

热门文章