这只是折中方案,因为并没有实现背景全透明的效果。
.btn{
margin: 0 5px;
padding: 5px 20px;
cursor: pointer;
}
.btn::before {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
border: 1px solid transparent;
background-clip: padding-box, border-box;
background-origin: padding-box, border-box;
background-image: linear-gradient(to right, #1a2324, #1a2324), linear-gradient(0deg, #a1ffd2, #a7cb50);
box-shadow: 0 0 18px 0 rgba(46, 161, 108, 0.55) inset;
border-radius: 20px;
opacity: 0.4;
z-index: -1;
}
效果如下: