這個問題在這里已經有了答案： 在具有漸變背景的元素上應用透明邊框時的奇怪效果 7 個答案 1 小時前關閉。
我有一個按鈕，我希望有一個厚邊框，其不透明度低于按鈕本身。但是添加背景顏色會隱藏邊框。如何解決？（在代碼段中取消注釋背景顏色以重現問題）
.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>uj5u.com熱心網友回復：
因為背景在邊界下延伸......你可以用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>uj5u.com熱心網友回復：
在你的 help_button css-> 中添加這個
-webkit-background-clip: padding-box; /* for Safari */
background-clip: padding-box; /* for IE9 , Firefox 4 , Opera, Chrome */
或者你可以使用 box-shadow ->
border: none;
box-shadow: 0px 0px 0px 10px rgba(243, 147, 37, 0.4);
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/451925.html
標籤：css
上一篇：如何使固定滾動棒只到某個部分
下一篇：通過路徑更改調整SVG大小