html+css制作任意大小边框一致的面板。
我想制作一个通用的面板框用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>
<div style="width:490px;height:320px;margin-top:10px;margin-right:10px;"> <div> <div></div> <div></div> <div></div> </div> <div> <div></div> <div> </div> <div></div> </div> <div> <div></div> <div></div> <div></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;
- }
.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,效果就是这样,
接下来就是需要切一组图片出来。
ie6和ie7兼容性存在问题,正在解决中…