css实现元素中空透明色，如图

元素中间是透明的，周围有颜色

css css3

阅读 4.5k

3 个回答

得票最新

amilytom

6971417

发布于
2021-02-10

✓ 已被采纳

利用css伪类after可以实现

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Examples</title>
    <style>
      .hole {
        width: 100px;
        height: 100px;
        position: relative;
        margin-top: 200px;
        margin-left: 200px;
        border-radius: 0;
        background-color: transparent;
        border: 100px solid #00a1e8;
        z-index: 1;
        position: absolute;
      }
      .hole:after {
        position: absolute;
        height: 100px;
        width: 100px;
        left: -50px;
        top: -50px;
        content: '';
        border-radius: 50%;
        border: 50px solid #00a1e8;
        z-index: 5;
      }
    </style>
  </head>
  <body style="background-color: #333">
    <!-- body 设置背景色是为了能看出镂空效果 -->
    <div class="hole"></div>
  </body>
</html>