矩形的四角发光

最近在做一个运维的项目，设计的一个界面，为了体现科技感，四周加了个发光的直角。

设计稿DEMO：

用代码如何实现呢？我是这样写的，各位看官有更好的建议非常欢迎提出，疯姑娘也是在摸索着前进中～～

<div style="width:820px;height: 250px;margin-right: 10px;float: left;position: relative;">
  <img src="../直角-左上.png" style="margin-left: -6px;margin-top: -7px;">
  <img src="../直角-右上.png" style="padding-left: 93%;margin-top: -7px;position: absolute;">
  <img src="../直角-左下.png" style="margin-left:-4.4%;padding-top: 28%;position: absolute;">
  <img src="../直角-右下.png" style="padding-left: 93%;padding-top: 28%;position: absolute;">

</div>

大概思路：

1.布局好div

2.4个直角的图片利用定位的方式固定到每个角落

缺点：

不能自适应各个屏幕大小，直角图片会移动位置，只能用按开始矩形的比例变化时位置才不会便移

get 代码实现新方式～～～

在CSS里有个border-image的属性，可以完全实现此效果。

<div class="box">

</div>

.box{

  height: 100px;

  width:300px;
  background-color: #103b56;
  border: 25px solid transparent;
  border-image: url(../../src/assets/img/背景全图.png);
  border-image-slice: 34;
  border-image-repeat: round;
  }

重点：

1.背景图是4个发光直角组成一个正方形

2.

border-image-slice 不能写单位px，是单个直角的宽度，34px;