复杂边框切图思考

最近开发的项目中，有个复杂边框的设计图，需要切图，没能实现高度由内容撑开，觉得还是不是很完美，也没想到好的方法，记录下，看以后能有好的方法。

效果图如下：

实现步骤

1. html 结构

<div class="border-wrap">
  <div class="middle"></div>
  <div class="main">正文内容</div>
</div>

border-wrap class 用来放顶部的边框切图 和 底部的边框切图
middle class 用来放一像素的切图
main class 正文区域

b_top.png 图片

b_bottom.png 图片

b_middle.png 图片

2. css 样式

1. 给 border-wrap class 添加 css 样式

   .border-wrap{
     width: 362px;
     height: 215px;
     border-left: transparent;
     position: relative;
     background: url('./b_top.png') no-repeat,url('./b_bottom.png') no-repeat left bottom;
   }
   

   

2. 给 middle class 添加 css 样式

   .middle{
     width: 362px;
     height: 84px;
     background: url('./b_middle.png') repeat-y 6px top;
     position: absolute;
     left: 0;
     top: 67px;
     font-size: 34px;
     color: #fff;
     position: relative;
   }
   

   

3. 给 main class 添加 css 样式

   只能通过定位 将正文安排在想要的区域

   .main{
      width: 100%;
      height: 100%;
      padding-top: -67px;
      color: #fff;
      z-index: 2;
      position: absolute;
      left: 0;
      top: 0;
      padding: 16px 20px 0 30px;
    }
   

   

3. 通过给border-wrap 添加其他的class 来实现不同高度的扩展

弊端 不同高度的，都需要单独再添加 class 实现；而且还需要计算 middle 的高度

<div class="border-wrap height_398">
  <div class="middle"></div>
  <div class="main">正文内容</div>
</div>

 .border-wrap{
   height: 398px; /* 215 -> 398 */
 }
 .middle{
   height: 267px;
 }