CSS 查看元素/使父元素的边框部分不可见

问题描述

我有一个 ng-select（下拉菜单），它扩展到其父元素的边界之外。该父元素是透明的，并且有一个不透明的白色边框，ng-select 也是如此。请参阅visualization。

我需要的是某种“透视”功能，以便当前穿过“test2”的边框不可见，但仅适用于下拉选项的宽度，而不是整个边框底部。简单地将选项的背景设置为不透明的东西是行不通的，因为有背景图像而不是简单的单色背景。

到目前为止，我只找到了这个 CSS - Child element see through parent，但是我看不出有什么方法可以使该解决方案适应我的需求。

我能想到的另一种方法是在下拉菜单上设置背景图像并手动计算 x/y 位置，但对我来说这似乎不是一个好方法。

如何最好地实现这种行为的想法？

像下面的代码一样使用掩码后，下拉菜单将被完全切断：mask visualization

  mask:
    /* 3rd mask */
    linear-gradient(#fff,#fff)
    top 150px right 5em/
     200px 50px,/**/
    linear-gradient(#fff,#fff);
  mask-repeat:no-repeat;
  mask-composite:exclude;

使用 position: relative; z-index: 999、this is the result。 Here's a code example.

解决方法

我找到了解决我的问题的方法。我没有使用边框底部，而是使用位于底部的线性渐变背景，单击下拉菜单即可切换。

  <div
    class="card empyre-item-form my-4 col-lg-12"
    [ngClass]="{
        'empyre-game-item-dropdown': dropdown,'empyre-game-item-default': !dropdown
      }"
  >
...
    <ng-select
      class="empyre-select mb-4"
      [items]="['test2','test6']"
      placeholder="Choose Account / ignore otherwise"
      (open)="dropdown = true"
      (close)="dropdown = false"
    >

.empyre-game-item-default {
  background:
    linear-gradient(to right,white 0%,white 100%) no-repeat !important;
  background-size: 100% 1px !important;
  background-position: 0 100% !important;
  border-bottom: none !important;
  border-bottom-right-radius: 0.2rem !important;
  border-bottom-left-radius: 0.2rem !important;
}

.empyre-game-item-dropdown {
  background:
    linear-gradient(to right,white 1.275em,transparent 1.275em) no-repeat,linear-gradient(to left,transparent 1.275em) no-repeat !important;
  background-size: 100% 1px !important;
  background-position: 0 100% !important;
  border-bottom: none !important;
  border-bottom-right-radius: 0.2rem !important;
  border-bottom-left-radius: 0.2rem !important;
}

See stackblitz for full code example.

background border transparent