无限制的自由适应的边框

最新推荐文章于 2021-02-25 03:44:17 发布

飘零雾雨

最新推荐文章于 2021-02-25 03:44:17 发布

阅读量1.4k

点赞数

分类专栏： CSS 文章标签： class xhtml url div html css

本文链接：https://blog.csdn.net/storm0/article/details/2173241

版权

CSS 专栏收录该内容

43 篇文章 0 订阅

订阅专栏

　　前几天改一个东东时，看到一个不错的效果，可惜它是用JS做的，有点复杂和麻烦。今天正好没什么事，就整了个用CSS实现的方法，感觉应该会比较实用的。

　　效果描述：一个容器，有外在表现的一种容器，这个容器要根据自身包含的内容（比如说图片）大小来改变自己的宽高。

　　{这个框框是借用别人滴，我美工比较差而且人很懒滴说，只是自己切了下图}

　　一路做来都非常顺利，顺便考虑了下图片请求的问题，合并了几张图片，其实还可以更优化的，不过暂时就这样，该例仅做说明，实际应用时再Update。

　　不过做到最后成型的时候，却出了一点小小的问题，IE下居然不能自适应宽，搞了半天，才发现是个疏漏造成滴，呵呵，虚惊一场。

　　掰了这么多，看效果先（可以烤到本地测试更换内容）：

　　［效果演示：http://www.doyoe.com/model/xhtmlcss/style/autoframe/1.htm］

CSS部分：

#main {
float:left;
}
img {
vertical-align:middle;
}
.dytop {
background:url(skin/top.gif) 21px top repeat-x;
}
.dyr_t {
background:url(skin/jiao.gif) right -42px no-repeat;
line-height:21px;
}
.dyl_t {
background-position:left top;
}
.dyr_b {
background-position:right -63px;
}
.dyl_b {
background-position:left -21px;
}
.dybot {
background:url(skin/bottom.gif) 21px bottom repeat-x;
}
.dyleft {
background:url(skin/left.gif) left top repeat-y;
}
.dyright {
background:url(skin/right.gif) right top repeat-y;
padding:0 21px;
}

XHTML部分：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="Author" content="Doyoe(飘零雾雨), edzmaster@gmail.com" />
<title>无限制的自由适应的边框 - 转载请注明出处</title>
</head>
<body>
<h3>无限制的自适应宽高的框框：</h3>
<div id="main" class="dytop"><div class="dybot">
<div class="dyr_t"><div class="dyl_t dyr_t"> </div></div>
<div class="dyleft"><div class="dyright"><img src="images/3.jpg" alt="作者" title="作者" /></div></div>
<div class="dyr_b dyr_t"><div class="dyl_b dyr_t"> </div></div>
</div></div>
</body>
</html>

　　是不是挺好玩的，我自己是觉得具有可玩性滴。

　　如有更好实现办法的同学，请与我联系，希望共同讨论更优方法。

飘零雾雨

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
无限制的自由适应的边框

　　前几天改一个东东时，看到一个不错的效果，可惜它是用JS做的，有点复杂和麻烦。今天正好没什么事，就整了个用CSS实现的方法，感觉应该会比较实用的。　　效果描述：一个容器，有外在表现的一种容器，这个容器要根据自身包含的内容（比如说图片）大小来改变自己的宽高。　　{这个框框是借用别人滴，我美工比较差而且人很懒滴说，只是自己切了下图}　　一路做来都非常顺利，顺便考虑了下图片请求的问题，合并
复制链接

扫一扫