我正在尝试得到这样的东西:
我尝试过使用outline,但是我不能在outline上设置边框半径。我也尝试了一个带有白色边框的方框阴影,但我需要边框是透明的。任何想法都将不胜感激。
无法使用以下内容设置轮廓的边框半径:
.btn {
outline: 1px solid #B54104;
outline-offset: 1px;
}
轮廓和按钮之间的间隙不透明:
.btn {
border: 1px solid #fff;
box-shadow: 0 0 0 1px #c5170a;
}
按钮和偏移轮廓之间的间隙必须是透明的。
发布于 2018-12-18 04:26:27
您可以尝试使用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>
https://stackoverflow.com/questions/53822444
复制相似问题