css 实现四角边框

项目需要实现如图边框效果

• 圆型渐变填充border

<div class="border"></div>
.border{
        width: 20px;
        height: 32px;
        border-image-source: radial-gradient(transparent 75%,cyan 100%);
        border-image-slice: 1;
        border-width: 1px;
        border-style: solid;
        border-image-outset: 1px;
}

• 伪元素

 <div class="test-box">
      <div class="test">1</div>
 </div>
  .test-box {
        position: relative;
        width: 20px;
        height: 32px;
        .test {
          &::before{
            position: absolute;
            width: 5px;
            height: 5px;
            content: '';
            display: block;
            left:0;
            top:0;
            border-top:1px solid greenyellow;
            border-left:1px solid greenyellow;
          }
          &::after{
            position: absolute;
            width: 5px;
            height: 5px;
            content: '';
            display: block;
            right:0;
            top:0;
            border-top:1px solid greenyellow;
            border-right:1px solid greenyellow;
          }
          }
          &::before{
            position: absolute;
            width: 5px;
            height: 5px;
            content: '';
            display: block;
            left:0;
            bottom:0;
            border-bottom:1px solid greenyellow;
            border-left:1px solid greenyellow;
          }
          &::after{
            position: absolute;
            width: 5px;
            height: 5px;
            content: '';
            display: block;
            right:0;
            bottom:0;
            border-bottom:1px solid greenyellow;
            border-right:1px solid greenyellow;
          }
        }

• 背景色

  <div class="test">1</div>
   .test {
          width: 20px;
          height: 32px;
          background: linear-gradient(to top, greenyellow,greenyellow) left top no-repeat,
                      linear-gradient(to right, greenyellow, greenyellow) left top no-repeat,
                      linear-gradient(to top,greenyellow,greenyellow) right top no-repeat,
                      linear-gradient(to left, greenyellow, greenyellow) right top no-repeat,
                      linear-gradient(to bottom,greenyellow,greenyellow) left bottom no-repeat,
                      linear-gradient(to right, greenyellow, greenyellow) left bottom no-repeat,
                      linear-gradient(to bottom, greenyellow,greenyellow) right bottom no-repeat,
                      linear-gradient(to left, greenyellow, greenyellow) right bottom no-repeat;
          background-size: 6px 2px,2px 6px,2px 6px,6px 2px,2px 6px,6px 2px,2px 6px,6px 2px;          
        }