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

冷不
  • 237

image.png
元素中间是透明的,周围有颜色

回复
阅读 716
3 个回答

利用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>

image.png

svg或者css clip-path应该可以

你知道吗?

宣传栏