为什么背景颜色隐藏边框

Question

我有一个按钮，我希望它有一个较厚的边框，不透明度比按钮本身低。但是添加背景颜色会隐藏边界。如何修复？(在代码段中取消注释背景颜色以重现问题(

.help_button {
position: fixed;
bottom: 10rem;
right: 10rem;
width: 7.5rem;
height: 7.5rem;
border-radius: 50%;
border: 10px solid rgba(243, 147, 37, 0.4);
font-style: normal;
font-weight: 600;
font-size: 2.5rem;
line-height: 150%;
color: #ffffff;
// background-color: #F39325;
}

<button class="help_button" aria-label="help and feedback form" id="open_feedback_form">?</button>

Answer 1

因为背景在边界下延伸。。。你可以用background-clip来解决这个问题

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
::before,
::after {
box-sizing: inherit;
}
.help_button {
right: 10rem;
width: 7.5rem;
height: 7.5rem;
border-radius: 50%;
border: 10px solid rgba(243, 147, 37, 0.4);
font-style: normal;
font-weight: 600;
font-size: 2.5rem;
line-height: 150%;
color: #ffffff;
background-color: #F39325;
background-clip: content-box;
}

<button class="help_button" aria-label="help and feedback form" id="open_feedback_form">?</button>

Answer 2

将其添加到您的help_button css中->

-webkit-background-clip: padding-box; /* for Safari */
background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */

或者您可以使用方框阴影->

border: none;
box-shadow: 0px 0px 0px 10px rgba(243, 147, 37, 0.4);