是否可以从插入框阴影过渡到常规框阴影？答案

【问题标题】：Is it possible to transition from an inset box-shadow to a regualr box-shadow?是否可以从插入框阴影过渡到常规框阴影？
【发布时间】：2020-08-21 04:03:50
【问题描述】：

这在上下文中可能没有意义，但我正在做一些我希望有一个插入框阴影转换为正常框阴影的东西。过渡在没有插图的情况下有效，但会中断。有没有可能？

.foo{
  height: 20rem;
  width: 20rem;
  box-shadow: inset 4px 0px 4px grey,
    inset -4px 0px 4px grey;
  background: cornsilk;
  &:hover{
     box-shadow: 1px 9px 4px 9px grey;
    transition: box-shadow 1s;
  }
}

https://codepen.io/bobam/pen/ZEWBeJp

【问题讨论】：

标签： css sass transition

【解决方案1】：

box-shadow inset 到常规的直接转换是不可能的。但是，有一种技巧可以产生更接近的效果。

考虑以下css：

.foo {
    width: 50px;
    height: 50px;
    border: 1px solid #aaa;
    box-shadow: inset 0 0 10px #aaa;
    animation: boxShadowOut 1s;
}
.foo:hover {
    box-shadow: 0 0 10px #aaa;
    animation: boxShadowIn 1s;
}
    
@keyframes boxShadowIn {
    0% { box-shadow: inset 0 0 10px #aaa; }
    50% { box-shadow: none; }
    100% { box-shadow: 0 0 10px #aaa; }
}
    
@keyframes boxShadowOut {
    0% { box-shadow: 0 0 10px #aaa; }
    50% { box-shadow: none; }
    100% { box-shadow: inset 0 0 10px #aaa; }
}

&lt;div class="foo"&gt;&lt;/div&gt;

【讨论】：

谢谢！我怀疑动画可能是关键。
是的。它将持有钥匙。

【解决方案2】：

你可以通过过渡来做到这一点。当您不需要阴影时，您只需一次定义所有阴影并使用这些值将它们设为0：

.foo {
  height: 8rem;
  width: 8rem;
  margin:10px;
  box-shadow: 
    inset 4px 0px 4px grey, 
    inset -4px 0px 4px grey,
    0px 0px 0px 0px grey;
  transition: box-shadow 1s;
  background: cornsilk;
}
.foo:hover {
  box-shadow: 
    inset 0px 0px 0px grey, 
    inset 0px 0px 0px grey,
    1px 9px 4px 9px grey;
}

<div class="foo">
</div>

【讨论】：