我想在白色背景 div 中使按钮边框透明答案

【问题标题】：I want to make a button border transparent inside a white background div我想在白色背景 div 中使按钮边框透明
【发布时间】：2020-07-10 13:24:22
【问题描述】：

我想让按钮边框像附加图像中一样透明。一个带有白色背景颜色的 div，然后在里面我想添加一个具有 15px 边距或填充的按钮，并使其透明。

<div class="row">
 <div class="col-md-3 col-12" style="background-color: #fff;">
    <p>Thousand of Local Listings.</p>

 <div style="padding: 15px;background: transparent;z-index:9999;">

    <a href="" style="">START HERE</a>
  </div>
 </div>
</div>

【问题讨论】：

这是您找到的网站还是图片？查看链接会有所帮助，您必须将一些 css 应用于背景白色 div，而不是与按钮边框有关，我认为您可以看到按钮有 1px 白色边框
这是一张图片。我没有链接。是的，它不是按钮边框，我想我需要为 div 添加一些边距，然后应用背景透明，但它不起作用

标签： html css

【解决方案1】：

您可以使用box-shadow 和透明边框来模拟：

.box {
  border: 1px solid;
  overflow: hidden;
  width: 300px;
  padding: 20px 50px;
}

button {
  border: 10px solid transparent;
  padding: 10px;
  background: #000 padding-box;
  color: #fff;
  box-shadow: 0 0 0 200vw #fff;
}

.box>*:not(button) {
  position: relative;
}

body {
  background: gray;
}

<div class="box">
  <h2>Title</h2>
  <p>some text here and there</p>
  <button>A button here</button>
</div>

【讨论】：