CSS过滤器属性不能很好地与z索引？

aiqt4smr 于 2023-03-25 发布在其他

关注(0)|答案(1)|浏览(138)

你可以在codepen上找到我的复制品，这里是link

label {
          filter: drop-shadow(
            3px 3px 2px #00000020
          );
          font-size: 16px;
          cursor: pointer;
          height: 3rem;
          line-height: 3rem;
....
code long here, see on codepen plz.

我想做的是像下面的图片：

我想在选项卡控件上添加一些阴影，这样它们看起来会更自然。但似乎z-index属性在我尝试设置filter属性时不起作用（filter而不是box-shdadow的原因是因为半径角效果是通过clip-path实现的，它似乎不适合box-shadow）
谢谢。
我所期望的是它的工作原理就像上面的图片。

css

来源：https://stackoverflow.com/questions/75799464/css-filter-property-not-work-well-with-z-index

1条答案

按热度按时间

rjee0c151#

如果你想给标签控件添加阴影，你可以尝试使用box-shadow属性而不是filter属性。虽然clip-path可能不能很好地与box-shadow一起工作，但还有其他方法可以实现你想要的圆角效果。
一种方法是使用border-radius属性在选项卡控件上创建圆角，然后你可以在整个元素上应用一个方框阴影，包括圆角。
下面是一个如何将方框阴影应用于圆角选项卡控件的示例：

.radio-group {
        height: 3rem;
        border-radius: 0 0 15px 15px;
        background-color: rgb(159, 159, 159);
        font-size: 0;
        border-radius: 10px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

在本例中，tab控件元素的边框半径为10个像素，并且具有创建柔和阴影效果的框形阴影。
如果您仍然喜欢使用filter属性，则可能需要调整元素的z索引，以确保阴影显示在其他元素的顶部。您可以通过为具有阴影的元素设置更高的z索引值来完成此操作。

&::before {
  filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.5));
  z-index: 1;
}

在本例中，tab-control元素的z索引设置为1，以确保它出现在页面上其他元素的顶部。

赞(0）回复(0）举报 2023-03-25

我来回答

CSS过滤器属性不能很好地与z索引？

1条答案

相关问题

热门标签

最新问答