是否可以从 inset box-shadow 过渡到常规 box-shadow？

Question

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

.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

Answer 1

无法将 box-shadow 插图直接过渡到常规。但是，有一种 hack 可以提供更接近的效果。

考虑以下 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; }
}

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

Answer 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>

是否可以从 inset box-shadow 过渡到常规 box-shadow？

Is it possible to transition from an inset box-shadow to a regualr box-shadow?

css

sass

transition