react大屏实现好看的边框效果

效果图

代码

          <div className='inner-box'>
            <AlarmInfo />
          </div>
          <div className='boxfoot'></div>
        </div>

    box-sizing: border-box;
    // border: 1px solid #1d225a;
    border: 1px solid #09828c;
    position: relative;
    border-image: url(../img/border.png) 51 38 21 132;
    // border-width: 20px 10px 10px 10px;
    .px2vh(border-top-width, 40);
    .px2vh(border-right-width, 20);
    .px2vh(border-bottom-width, 10);
    .px2vh(border-left-width, 30);
    .inner-box {
      position: absolute;
      .px2vh(top, -40);
      .px2vh(right, -20);
      .px2vh(bottom, -10);
      .px2vh(left, -30);
      // border: 1px solid red;
    }
  }

此文章为11月Day026学习笔记，内容来源于极客时间《重学前端》，强烈推荐该课程