时间戳

首页 > 解决方案 > CSS 浏览元素/使父元素的边框部分不可见

css - CSS 浏览元素/使父元素的边框部分不可见

问题描述

我有一个扩展超出其父元素边界的 ng-select（下拉菜单）。该父元素是透明的并且有一个不透明的白色边框，ng-select 也是如此。查看可视化。

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

到目前为止，我只发现这个CSS - Child element see through parent，但是我看不到如何使该解决方案适应我的需求。

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

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

编辑：stackblitz 代码示例

在使用下面的代码中的掩码后，下拉菜单将被完全切断：掩码可视化

  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，这就是结果。这是一个代码示例。

标签： cssbackgroundbordertransparent

解决方案

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

  <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, white 1.275em, 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;
}

有关完整代码示例，请参阅 stackblitz。

推荐阅读