隐藏了溢出功能，无法使用伪属性

Question

因此，我正在尝试创建一个需要的元素，以使我正在使用的动画具有overflow: hidden。

我也在尝试在已应用mix-blend-mode的边缘周围创建边框。我正在使用:before伪元素，因此只能更改边框的mix-blend-mode。

[将box-shadow应用于按钮类时，如何在:before元素上显示overflow: hidden？

HTML

<div class="button">Button</div>

CSS

body {
  background: green;
}

.button {
  display: inline-block;
  padding: 2em;
  background: rgba(white, 0.4);
  position: relative;
  /* Can only see the border when removing "overflow: hidden". */
  overflow: hidden;

  &:before {
    position: absolute;
    content: 'test';
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

    /* Creates border around button with blend mode. */
    box-shadow:  0 0 0 10px blue;
    mix-blend-mode: overlay;
  }
}

JSFiddle

感谢您提前提供帮助！

注意：不在[顶部/左侧/右侧/底部]添加10px提供所需的解决方案，我正在寻找。如果您注释掉“溢出：隐藏；”它应该完全像这样显示边框。

Answer 1

您所缺少的是该位置是绝对的[top/bottom/left/right] = 0px，因此它占用了溢出隐藏父对象的全部空间，因此没有阴影出现的空间，因此您需要做的是提供适当的空间[C0 ]。

[top/bottom/left/right] = 10px

body {
  background: green;
}

.button {
    display: inline-block;
    padding: 2em;
    background: rgba(255, 255, 255, 0.4);
    position: relative;
    overflow: hidden;
}
  
  .button::before {
    position: absolute;
    content: 'test';
    top: 10px;
    bottom: 10px;
    left: 10px;
    right: 10px;
    
    box-shadow: 0 0 0 10px blue;
    mix-blend-mode: overlay;
  }