如何使用阴影和透明填充创建边框以显示阴影

Question

我拼命想要编写这个按钮：

有人能帮帮我吗？感谢。

我尝试制作一个带有box-shadow的简单按钮，一个边框和一个透明的背景，但似乎不可能。

所以你可以在这个其他的代码中看到一个尝试了:after和:before的其他approch但似乎没有任何效果。

Answer 1

我发现这样做的最好方法是使用伪元素并在其上应用模糊边框。

.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为您处理此问题。