css实现元素中空透明色，如图_编程技术网-程序员技术内容聚合平台

（在说正事之前，我要推荐一个福利：你还在原价购买阿里云、腾讯云、华为云服务器吗？那太亏啦！来这里，新购、升级、续费都打折，能够为您省60%的钱呢！2核4G企业级云服务器低至69元/年，点击进去看看吧>>>)

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

###

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

###

简单，用Radial Gradient, 中间用透明色

###

svg或者css clip-path应该可以