我正拼命尝试编写此按钮的代码:
有人能帮帮我吗?谢谢。
我试图用 box-shadow
、边框和透明背景制作一个简单的按钮,但似乎不可能。
因此,您可以在这个其他代码笔中看到,尝试使用 :after
和 :before
的其他方法,但似乎没有任何效果。
最佳答案
我发现最好的方法是使用伪元素并在其上应用模糊边框。
.border-shadow {
position: relative;
display: inline-block;
border: 3px solid #F01476;
padding: 20px;
background-color: transparent;
&:after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
outline: 3px solid #F01476;
filter: blur(2px);
transform: translateY(5px);
}
}
如果你想要一个边框渐变那么你可以这样做:
.border-shadow {
position: relative;
display: inline-block;
padding: 20px;
background-color: transparent;
&:after {
content: '';
position: absolute;
top: -3px;
right: -3px;
bottom: -3px;
left: -3px;
filter: blur(2px);
transform: translateY(5px);
}
&, &:after {
border-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='50' height='50'><defs><linearGradient id='redgradient'><stop offset='0' stop-color='%23F01476'/><stop offset='1' stop-color='%23F3590F'/></linearGradient></defs><g id='Layer_1'><path d='M0,0 L50,0 L50,50 L0,50 L0,0 z' fill='url(%23redgradient)' width='100%' height='100%'/></g></svg>") 10% stretch;
}
}
See the jsfiddle for both examples in action
注意:这是无前缀的 CSS,因此为了获得适当的浏览器支持,您需要应用适当的前缀。我建议使用 autoprefixer如果可能的话,为您处理。
关于css - 如何创建带有阴影和透明填充的边框让阴影出现,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46025264/