时间戳

首页 > 解决方案 > 如何仅将变换效果应用于 box-shadow

html - 如何仅将变换效果应用于 box-shadow

问题描述

我正在构建一个使用 :hover 伪类来显示框阴影的菜单。

这是一个正常的导航项目，这是 :hover 下的相同项目。

我正在使用 transform 属性对 box-shadow 应用倾斜，使其看起来像一个厚实的、重叠的、倾斜的下划线。

.link:hover {
    box-shadow: 0 -0.5em 0 #7ed6df inset;
    transform: skew(-20deg);
}

如您所见，倾斜有效，但当我只希望框阴影倾斜时，它也会倾斜 .link 文本。

我尝试使用 @apply 创建父样式，如下所示：

--link-underline: {
    box-shadow: 0 -0.5em 0 #7ed6df inset;
    transform: skew(-20deg);
}

...

.link:hover {
    @apply --link-underline;
}

但是当我将鼠标悬停在链接上时没有任何变化，我玩弄了一个 ::after 伪元素，它将阴影添加到一个不可见的文本元素，但也找不到在那里工作的修复程序。如果有任何建议，我将不胜感激。谢谢！

标签： htmlcsspseudo-elementpseudo-classbox-shadow

解决方案

我试了一下，我已经实现了你想要的，但我不确定这是否是最好的解决方案，但这有点工作。top: 11%;如果浏览器中的位置发生变化，您可以更改 的值来调整位置。希望这对您有所帮助。

hr.underline {
  border: 5px solid #7ed6df;
  transform: skew(-20deg);
  display: none;
}

.hover:hover .underline{
    display: flex;
    width: 5%;
    position: absolute;
    top: 11%;
    z-index: -1;
}
<div class="hover">
  <h3 class="link">Why</h3>
  <hr class="underline">
</div>

推荐阅读