如何创建带有阴影和透明填充的边框以让阴影出现

Question

我正在拼命尝试编写这个按钮：

有人可以帮我吗？谢谢。

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

因此，您可以在另一个 codepen 中看到，a 使用 :after 和 :before 尝试了其他方法，但似乎没有任何效果。

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