带有边框半径的div和边框之间的透明空间
带有边框半径的div和边框之间的透明空间
提问于 2018-12-18 04:20:13
我正在尝试得到这样的东西：
我尝试过使用outline，但是我不能在outline上设置边框半径。我也尝试了一个带有白色边框的方框阴影，但我需要边框是透明的。任何想法都将不胜感激。
无法使用以下内容设置轮廓的边框半径：
.btn {
outline: 1px solid #B54104;
outline-offset: 1px;
}轮廓和按钮之间的间隙不透明：
.btn {
border: 1px solid #fff;
box-shadow: 0 0 0 1px #c5170a;
}按钮和偏移轮廓之间的间隙必须是透明的。
回答 1
Stack Overflow用户
回答已采纳
发布于 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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53822444
复制相关文章
相似问题