具有边框半径的 div 和边框之间的透明空间答案

【问题标题】：Transparent space between div and border with a border radius具有边框半径的 div 和边框之间的透明空间
【发布时间】：2022-03-16 17:46:13
【问题描述】：

我想得到这样的东西：

我尝试过使用轮廓，但无法在轮廓上设置边框半径。我也尝试过带有白色边框的盒子阴影，但我需要边框是透明的。任何想法将不胜感激。

不能用这个设置轮廓的边框半径：

.btn {
  outline: 1px solid #B54104;
  outline-offset: 1px;
}

轮廓和按钮之间的间隙不透明：

.btn {
  border: 1px solid #fff;
  box-shadow: 0 0 0 1px #c5170a;
}

按钮和偏移轮廓之间的间隙必须透明。

【问题讨论】：

到目前为止你尝试了什么？
请提供已应用于此的 CSS。

标签： html css

【解决方案1】：

您可以尝试依赖background-clip 的背景着色来避免为按钮的一部分着色：

.button {
  display:inline-block;
  padding:3px; /*control the spacing*/
  width:100px;
  text-align:center;
  line-height:30px;
  border-radius:15px;
  color:#fff;
  border:2px solid orange;
  background: orange content-box; /*color only the content*/
}

body {
 background:pink;
}

<div class="button">
button
</div>

同样的想法使用padding-box 并用边框控制空间：

.button {
  display:inline-block;
  width:100px;
  text-align:center;
  line-height:30px;
  border-radius:15px;
  color:#fff;
  border:5px solid transparent; /*control the spacing*/
  background: orange padding-box; /*don't color the border*/
  box-shadow: 0 0 0 2px orange; 
}

body {
 background:pink;
}

<div class="button">
button
</div>

【讨论】：

【解决方案2】：

border-radius 现在可以很好地处理轮廓。

.btn {
  display: inline-block;
  margin: 20px;
  padding: 15px 30px;
  background-color: #b54204;
  border-radius: 5px;
  color: #fff;
  outline: 2px solid #b54204;
  outline-offset: 4px;
}

<div class="btn">
  BUTTON
</div>

【讨论】：