css 四角边框，可视化边框

最近需要做一个科技感，四角的边框，附上代码。

html：
    <div class="wh">
<!--      <div class="f-wh-4-shadow2"></div>-->
      <div class="f-wh-4-s1"></div>
    </div>

css:
.wh {
  .f-wh-4-s1 {
    // border: rgb(0, 153, 0) solid 1px;
    position: absolute;
    left: 1512px;
    top: 781px;
    width: 154px;
    height: 211px;
    z-index: 320;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    // opacity: 0.5;
    //color: hsl(253, 100%, 100%, 0.1);
    // opacity: 1;
    // border-width: 1px;
    box-shadow: rgba(0, 253, 219, 0.5) 0px 0px 20px inset;
    background: linear-gradient(to left, #00fd15, #00fd15) left top no-repeat,
    linear-gradient(to bottom, #00fd15, #00fd15) left top no-repeat,
    linear-gradient(to left, #00fd15, #00fd15) right top no-repeat,
    linear-gradient(to bottom, #00fd15, #00fd15) right top no-repeat,
    linear-gradient(to left, #00fd15, #00fd15) left bottom no-repeat,
    linear-gradient(to bottom, #00fd15, #00fd15) left bottom no-repeat,
    linear-gradient(to left, #00fd15, #00fd15) right bottom no-repeat,
    linear-gradient(to left, #00fd15, #00fd15) right bottom no-repeat;
    background-size: 0.5px 10px, 10px 1px, 1px 10px, 10px 1px;
  }
  }

效果如下：