盒子边框

一、运行截图

　　

二、代码

　　html代码：

<div id="box" style="min-height:253px;">
  <span class="one"></span>
  <span class="two"></span>
  <span class="three"></span>
  <span class="four"></span>

  <nz-card   style="background-color: #13123a;border: 0px;color: white;background-color: transparent;">
      <div style="padding:24px 12px;">
              <p style="font-size: 16px;margin-bottom: 0px;color: #8cc5fe;background-image: url('./../../assets/images/title.png'); 250px;background-size: contain;background-repeat: no-repeat;height: 28px;line-height: 28px;padding-left: 10px;margin-left: -12px;margin-top: -12px;">{{installationrankingsComponentConfig.title}}</p>

              <p *ngFor="let item of installationrankingsComponentConfig.data" style="line-height: 60px;height: 36px;color: #87c8fc;">
                  <span class="province_name" style="35%;float: left;position: relative;font-size: 12px;">
                      {{item.provincename}}
                  </span>
                  <span class="progress_container" style=" 51%;float: left;position: relative;left: 2%;">
                      <nz-progress [nzPercent]="item.percent"  nzType="line" nzStatus="active"  [nzStrokeWidth]="20" ></nz-progress>
                  </span>
                  <span class="percent_container" style="12%;float: right;position: relative;font-size: 12px;padding: 0px;line-height: 13px;margin-top: 18px;">
                    {{item.devicenum}}个
                    {{item.percent}}%
                  </span>
              </p>   
      </div>
  </nz-card>  

</div>

　　css代码：

#box{
    /* height: 200px; */
    min-height: 200px;
    box-shadow: 0 0 1px 1px #0f3a6c, 0 0 6px 1px #0f3a6c inset;
    margin: 0 auto;
    position: relative;
    padding: 5px;
    box-sizing: border-box;
    color: #fff;
    margin-bottom: 10px;
}
#box span{
    position: absolute;
    width:60px;
    height:30px;
}
#box .one{
    width: 14px;
    height: 14px;
    left:0;
    top:1px;
    border-top:1px solid #1890ff;
    border-left:1px solid #1890ff;
    margin:-1px 0 0 -1px;
}
#box .two{
    width: 14px;
    height: 14px;
    right:0;
    top:1px;
    border-top:1px solid #1890ff;
    border-right:1px solid #1890ff;
    margin:-1px -1px 0 0;
}
#box .three{
    width: 14px;
    height: 14px;
    left:0;
    bottom:0;
    border-left:1px solid #1890ff;
    border-bottom:1px solid #1890ff;
    margin:0 0 -1px -1px;
}
#box .four{
    width: 14px;
    height: 14px;
    right:0;
    bottom:0;
    border-right:1px solid #1890ff;
    border-bottom:1px solid #1890ff;
    margin:0  -1px -1px 0;
}