纯CSS 用span绝对定位实现四角边框_如何把span定位到div的边框-优快云博客

本文详细介绍了如何仅使用CSS和span元素，通过绝对定位技术来创建具有四角边框的视觉效果。这种方法适用于不支持复杂边框样式的环境，或者希望在布局中实现更灵活的边框设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>span绝对定位实现四角边框</title>
</head>
<body>
  <div class="container">
    <div class="panel">
      <span class="corner corner-left-top"></span>
      <span class="corner corner-right-top"></span>
      <span class="corner corner-right-bottom"></span>
      <span class="corner corner-left-bottom"></span>
      <span class="name">推送批次</span>
      <span class="num">754</span>
      <span class="unit">批</span>
    </div>
  </div>
  <style>
    .container {
      float: left;
      height: 200px;
      width: 200px;
      border: 1px solid #ff0;

      display: flex;
      justify-content: center;
      align-items: center;
    }
    .panel {
      display: flex;
      flex-direction: column;

      position: relative;

      height: 72px;
      width: 72px;
      background-color: rgba(10,33,100,0.4);
    }
    .name {
      line-height: 28px;
      text-align: center;
      font-size: 13px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #fff;
    }
    .num {
      line-height: 24px;
      text-align: center;
      font-size: 20px;
      font-family: Impact;
      font-weight: 400;
      color: #02eeff;
    }
    .unit {
      line-height: 17px;
      text-align: right;
      padding-right: 4px;
      font-size: 12px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #02eeff;
    }
    .corner {
      position: absolute;
      height: 7px;
      width: 7px;
      background-color: transparent;
      border: 1px solid #215aff;
    }
    .corner-left-top {
      left: 0;
      top: 0;
      border-right: transparent;
      border-bottom: transparent;
    }
    .corner-right-top {
      right: 0;
      top: 0;
      border-left: transparent;
      border-bottom: transparent;
    }
    .corner-right-bottom {
      right: 0;
      bottom: 0;
      border-left: transparent;
      border-top: transparent;
    }
    .corner-left-bottom {
      left: 0;
      bottom: 0;
      border-right: transparent;
      border-top: transparent;
    }
  </style>
</body>
</html>