如何制作带孔的容器？答案

【问题标题】：how to make a container with holes?如何制作带孔的容器？
【发布时间】：2022-12-18 17:22:23
【问题描述】：

我正在制作一个关于如何第一次使用我的应用程序的教程。

所以它看起来像一个关于如何使用按钮的弹出窗口

在教程中，我想让背景变暗，然后出现一个圆圈来圈住按钮，并且有一个教程文本

所以，我想做一个有圆孔的容器

这是一个简单的例子：

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .dark{
      height: 100%;
      width: 100%;
      position: fixed;
      background-color: rgba(0, 0, 0, 0.377);
    }
    .circle{
      height: 150px;
      width: 150px;
      border-radius: 50%;
      background-color: white;
    }
  </style>
</head>
<body>
  <div class="dark">
    <p style="color:white;font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;font-size: 23px;">This button is used to delete your file.</p>
    <div class="circle"></div>
  </div>
  <button style="margin:200px;">The Button</button>
</body>

但我希望孔在按钮上

【问题讨论】：

您可以对圆圈应用一些边距，或使用定位
不工作。洞的颜色不透明

标签： javascript html css

【解决方案1】：

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .dark{
      height: 100%;
      width: 100%;
      position: fixed;
      background-color: rgba(0, 0, 0, 0.377);
    }
    .circle{
      height: 150px;
      width: 150px;
      border-radius: 50%;
      background-color: white;
    }
    button {
      position:relative; /* ::before position absolute relative to this. */
      isolation: isolate; /* contain z-index; */
      overflow: visible; /* cater for circle pseudo element */
      color: white;
      background-color: purple; /* this not seen because ::after used for background colour */
    }
    button::before {
      content: " ";
      position: absolute;
      z-index: -2;
      inset: -4.5em -2.5em;
      /*  .circle code */
      width: 200%;
      aspect-ratio: 1;
      border-radius: 50%;
      background-color: white;
    }
     button::after {
     content: " ";
     position: absolute;
     z-index: -1;
     inset: 0;
     background-color: purple;
}
  </style>
</head>
<body>
  <div class="dark">
    <p style="color:white;font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;font-size: 23px;">This button is used to delete your file.</p>
    <!--  <div class="circle"></div> -->
  </div>
  <button style="margin:200px;">The Button</button>
</body>

【讨论】：

【解决方案2】：

更新

通过添加带有 overflow: hidden 的 <main> 容器更新了代码示例以包含覆盖，因此 sn-p 显示更正确。

原来的

只是作为替代解决方案发布：

经过一些实验，我想出了这种新方法，它实际上显示了一个透明的圆圈，而不是白色背景的圆圈，希望它更接近孔的预期行为。

这允许按钮旁边的其他元素被透视，并且它还保持按钮的交互性，因此它可以正确地接受悬停和单击效果。

运行此 sn-p 以查看结果：

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      main {
       display: flex;
       width: 100%;
       min-height: 100vh;
       justify-content: center;
       align-items: flex-start;
       overflow: hidden;
      }

      section {
        min-height: 300px;
        min-width: 500px;
        background: pink;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 16px;
        font-family: sans-serif;
        background: pink;
      }

      div {
        display: flex;
        background: pink;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 8px;
      }

      button {
        padding: 5px;
      }

      .highlight {
        position: relative;
        isolation: isolate;
      }

      .btn-wrap.highlight::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 10000px;
        height: 10000px;
        border-radius: 50%;
        background: radial-gradient(
          circle,
          rgba(0, 0, 0, 0) 1%,
          rgba(0, 0, 0, 0.377) 1.01%
        );
        z-index: -1;
      }
    </style>
  </head>
  <body>
  <main>
    <section>
      <h3>This button is used to delete your file</h3>
      <div class="btn-wrap highlight">
        <button>The Button</button>
      </div>
    </section>
    </main>
  </body>

【讨论】：

嗯..你能给完整的代码吗？？
刚刚注意到现在只有按钮文本位于背景之上，我会将按钮包装在一个 div 中以在 2 分钟内修复它
@Rob 我实际上想出了一个新的解决方案来制作一个真正的透明圆圈，我花了一段时间来思考它，但它确实给出了有趣的结果，不妨检查一下替代解决方案。
工作！非常感谢你！！