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

【问题标题】：How to apply transform effect to box-shadow only如何仅将变换效果应用于 box-shadow
【发布时间】：2019-09-07 18:12:11
【问题描述】：

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

Here's a nav item as normal 和 here's the same item under :hover。

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

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

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

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

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

...

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

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

【问题讨论】：

标签： html css pseudo-element pseudo-class box-shadow

【解决方案1】：

我试了一下，我已经达到了你想要的，但我不确定这是否是最好的解决方案，但这有点工作。您可以更改 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>

【讨论】：

感谢您的尝试！不幸的是，您的解决方案响应速度不快，我正在寻找与 CSS3 中的 Flexbox 配合得很好并且可以在多种屏幕尺寸上使用的东西。如果您查看上面代码 sn-p 的“整页”，您会发现它很快就崩溃了。但是非常感谢您试一试！
哦，欢迎您。对不起，我的回答没有帮助。希望你能找到解决办法:)

【解决方案2】：

在更多地摆弄伪元素和类之后，我有一个working solution！

首先我将这两个属性添加到我原来的 .link 类中，确保文本稳定：

display: inline;
position: relative;

然后我为我的 .link 类创建了一个 ::after 伪元素：

.link::after {
    content: '';
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    box-shadow: 0 -0.5em 0 #7ed6df inset;
    transform: skew(-20deg);
    opacity: 0;
}

此元素使用 z-index 位于原始文本下方，并以 0 不透明度隐藏自身。框阴影和倾斜应用于此 ::after 元素，但由于其内容为空，因此不会影响任何文本。我需要做的就是添加 :hover 函数，它将伪类置于 1 不透明度：

.link:hover::after {
    opacity: 1;
}

感谢您的建议，我想为此使用 box-shadow，因为我也在尝试为滑动动作设置动画。

【讨论】：

【解决方案3】：

这是一个使用多个背景的想法：

.text {
  display:inline-block;
  padding:5px 10px 5px;
  background:
    linear-gradient(-225deg,transparent 10px,lightblue 10px) bottom left /51% 15px,
    linear-gradient(-45deg ,transparent 10px,lightblue 10px) bottom right/51% 15px;
  background-repeat:no-repeat;
  
  
  
/*the below is not relevant, can be removed if hover is not needed*/
  background-size:0 0;
}
.text:hover {
  background-size:51% 15px;
}

<div class="text">some text here</div>
<div class="text">text</div>
<br>
<div class="text">loooooooooooooooooooong text</div>

【讨论】：