div与具有边界半径的边界之间的透明空间

时间:2018-12-17 20:20:13

标签: html css

我正在尝试得到这样的东西:

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

无法使用此设置轮廓的边界半径:

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

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

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

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

1 个答案:

答案 0 :(得分:3)

您可以尝试依靠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>