时间戳

首页 > 解决方案 > 我想在白色背景 div 中使按钮边框透明

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

问题描述

我想让按钮边框像附加图像中一样透明。一个带有白色背景颜色的 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>

标签： htmlcss

解决方案

您可以使用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>

推荐阅读