代码之家 › 专栏 › 技术社区 › loan

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

shadow border css

loan · 技术社区 · 7 年前

我拼命地想给这个按钮编码:

Button

有人能帮我吗?谢谢

我试着用 box-shadow

所以你可以在另一个代码笔中看到a尝试了另一种方法 :after 和 :before

1 回复 | 直到 7 年前

fredrivett bennygenel 7 年前

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

.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

autoprefixer