按钮 CSS 过滤阴影仅父级

Question

大家好，我需要你们的帮助

我想这样做：Model Botton

问题是，当我添加过滤器时

filter: drop-shadow(3px 4px 0px #0000B8);

我的按钮结果是：My Botton

你能帮帮我吗？

Answer 1

有多种方法。

这里有一些例子：

.button-1 {
  position: relative;
  color: #ff1800;
  background-color: white;
  font-size: 1.2em;
  font-weight: bold;
  border: 2px solid #ff1800;
  padding: 15px;
  border-radius: 100px;
}

.button-1::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: transparent;
  border: 2px solid #ff1800;
  border-radius: 100px;
  filter: drop-shadow(7px 12px 0px #0000B8);
  z-index: -1;
}

.button-2 {
  color: #ff1800;
  background-color: transparent;
  font-size: 1.2em;
  font-weight: bold;
  border: 2px solid #ff1800;
  padding: 15px;
  border-radius: 100px;
  box-shadow: 5px 10px 0 -2px white,
    5px 10px 0 0 #0000B8;
}

.button-3 {
  position: relative;
  color: #ff1800;
  background-color: white;
  font-size: 1.2em;
  font-weight: bold;
  border: 2px solid #ff1800;
  padding: 15px;
  border-radius: 100px;
}

.button-3::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  left: 4px;
  top: 8px;
  right: 0;
  bottom: 0;
  background-color: transparent;
  border: 2px solid #0000B8;
  border-radius: 100px;
  z-index: -1;
}

<button class="button-1">
  Become a seller
</button>

<button class="button-2">
  Become a seller
</button>

<button class="button-3">
  Become a seller
</button>

遗憾的是，none 种方法可以拥有完全透明的背景。

按钮 CSS 过滤阴影仅父级

Button CSS filter drop-shadow only parent

html

css

sass

less