边框的这种效果是怎么实现的啊

Answer 1

css
 .rect {
      position: absolute;
      top: 20px;      left: 20px;
      width: 100px;
      height: 100px;
      text-align: center;
      line-height: 100px;
      background: linear-gradient(to left, #f00, #f00) left top no-repeat,
        linear-gradient(to bottom, #f00, #f00) left top no-repeat,
        linear-gradient(to left, #f00, #f00) right top no-repeat,
        linear-gradient(to bottom, #f00, #f00) right top no-repeat,
        linear-gradient(to left, #f00, #f00) left bottom no-repeat,
        linear-gradient(to bottom, #f00, #f00) left bottom no-repeat,
        linear-gradient(to left, #f00, #f00) right bottom no-repeat,
        linear-gradient(to left, #f00, #f00) right bottom no-repeat;
      background-size: 1px 20px, 20px 1px, 1px 20px, 20px 1px;
    }
    
html
  <div class="rect">游戏首页</div>