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

Question

效果如下

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>

Answer 2

参考：

1. https://codepen.io/AZGSKULL/p...
2. https://codepen.io/hari_shanx...

codepen上一大把。。

Answer 3

这个用CSS写的话成本比较大，可以让你们设计给你个图片替代。

Answer 4

比如你定义四个span，然后使用定位，再设置它们的边框显示