html+css制作任意大小边框一致的面板

最新推荐文章于 2024-10-23 02:47:28 发布

痴情男孩

最新推荐文章于 2024-10-23 02:47:28 发布

阅读量6.2k

点赞数

分类专栏： css html 文章标签： html CSS

本文链接：https://blog.csdn.net/qp3887322/article/details/15814125

版权

css 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

html

4 篇文章 0 订阅

订阅专栏

我想制作一个通用的面板框用html+css，由于需要圆角效果，但是不是所有浏览器都支持，想支持的话需要牵连出别的东西，

指导老师的给出方案：

面板四个角分别是独立的 div用来存放四个方向不同的角背景，上下左右的边框是由一个背景图通过background-repeat来制造出任意长度的横线和竖线。

面板中央是内容主体，这个时候只要设定整个box的宽高即可得到任意大小的边框一致的面板。

优势：只需要精确的切一组图片，切浏览器加载这一组图片就可以应付所有面板，

所有的同一风格面板只需要copy一下代码，设置一下宽高即可

劣势：冗余代码稍稍多了点（应该可以优化到可以忽略不记）

大部分网站的方案：

每一个面板都有独立的背景图，背景图宽高固定了，这个没什么可说的，做N张图就行了。

优势：省代码

劣势：切N张图耗费时间，浏览器加载N张图耗费时间

上代码

html

<div class="jdbox" style="width:490px;height:320px;margin-top:10px;margin-right:10px;">
	<div class="boxtop">
		<div class="ltcorner"></div>
		<div class="lrline"></div>
		<div class="rtcorner"></div>
	</div>
	<div class="boxcenter">
		<div class="ltbline"></div>
		<div class="content">
		</div>
		<div class="rtbline"></div>
	</div>
	<div class="boxbottom">
		<div class="lbcorner"></div>
		<div class="lrline"></div>
		<div class="rbcorner"></div>
	</div>
</div>

css

.jdbox{
	display: block;
	background-color: #eee;
	position: relative;
	float: left;
}

.jdbox .boxtop{
	width: 100%;
	height: 10px;
	background-color: #aaa;
	position: absolute;
	top:0px;
}
.jdbox .boxtop .ltcorner,
.jdbox .boxbottom .ltcorner
{
	width: 10px;
	height: 10px;
	background-color: #bbb;
	position: absolute;
	top: 0px;
	left: 0px;
}
.jdbox .boxtop .lrline,
.jdbox .boxbottom .lrline
{
	width: auto;
	height: 10px;
	background-color: #ccc;
	position: absolute;
	top: 0px;
	left: 10px;
	right: 10px;
}
.jdbox .boxtop .rtcorner,
.jdbox .boxbottom .rtcorner
{
	width: 10px;
	height: 10px;
	background-color: #bbb;
	position: absolute;
	top: 0px;
	right: 0px;
}

.jdbox .boxcenter{
	width: 100%;
	height: auto;
	position: absolute;
	top: 10px;
	bottom: 10px;
}
.jdbox .boxcenter .ltbline{
	width: 10px;
	height: auto;
	background-color: #ccc;
	position: absolute;
	top: 0px;
	left: 0px;
	bottom: 0px;
}
.jdbox .boxcenter .content{
	width: auto;
	height: auto;
	background-color: rgba(255, 255, 255, 0);;
	position: absolute;
	top: 0px;
	left: 10px;
	right: 10px;
	bottom: 0px;
	word-wrap:break-word;
}
.jdbox .boxcenter .rtbline{
	width: 10px;
	height: auto;
	background-color: #ccc;
	position: absolute;
	top: 0px;
	right: 0px;
	bottom: 0px;
}

.jdbox .boxbottom{
	width: 100%;
	height: 10px;
	background-color: #aaa;
	position: absolute;
	bottom: 0px;
}

下面是几个宽高不同的面板，四个角是独立的div，效果就是这样，