CSS3：框阴影过渡不适用于伪类

Question

我在所有浏览器中的盒子阴影都遇到了奇怪的事情。

我想做什么：

当输入位于：focus时，平滑输入中的阴影。

问题：

以下代码可以正常工作，并且过渡很顺利： 请注意，我如何省略处于“默认”状态的盒子阴影。

#message-main #message {
  border: none;
  padding: 0.5em 0.75em 0.5em 0.75em;
  border-radius: $border-radius-input;
  background-color: $background-input;
  //box-shadow: 5px 5px 8px #a7a7a7, -5px -5px 8px #f5f5f5;
  transition: all 0.3s ease-in-out;
  font-size: 1rem;
  width: 100%;
  min-height: 39px;
  resize: vertical;
  resize: block;
}

#message-main #message:focus {
  box-shadow: inset 5px 5px 8px #a7a7a7, inset -5px -5px 8px #f5f5f5;
}

<div id="message-main">
  <label class="label is-required" for="message">Ihre Nachricht</label>
  <textarea id="message" class="inputfields required" name="message" rows="10" cols="46" placeholder="Schreiben Sie uns Ihre Nachricht." maxlength="1250" spellcheck="true" required></textarea>
</div>

一旦包含默认状态的框阴影，过渡将不再平滑，但仍可正常工作。

#message-main #message {
  border: none;
  padding: 0.5em 0.75em 0.5em 0.75em;
  border-radius: $border-radius-input;
  background-color: $background-input;
  box-shadow: 5px 5px 8px #a7a7a7, -5px -5px 8px #f5f5f5;
  transition: all 0.3s ease-in-out;
  font-size: 1rem;
  width: 100%;
  min-height: 39px;
  resize: vertical;
  resize: block;
}

#message-main #message:focus {
  box-shadow: inset 5px 5px 8px #a7a7a7, inset -5px -5px 8px #f5f5f5;
}

<div id="message-main">
  <label class="label is-required" for="message">Ihre Nachricht</label>
  <textarea id="message" class="inputfields required" name="message" rows="10" cols="46" placeholder="Schreiben Sie uns Ihre Nachricht." maxlength="1250" spellcheck="true" required></textarea>
</div>

我在这里到底想念什么？

Answer 1

这是因为在后面的代码段中，您将框阴影的方向从默认outset更改为inset（默认时未指定）。
让我的代码片段更好地理解这一点。另请阅读这篇有关框阴影过渡https://tobiasahlin.com/blog/how-to-animate-box-shadow/

性能的出色文章

#message-main #message {
  border: none;
  padding: 0.5em 0.75em 0.5em 0.75em;
  border-radius: $border-radius-input;
  background-color: $background-input;
  box-shadow: inset 0px 0px 0px #a7a7a7, inset 0px 0px 0px #f5f5f5;
  transition: all 0.3s ease-in-out;
  font-size: 1rem;
  width: 100%;
  min-height: 39px;
  resize: vertical;
  resize: block;
}

#message-main #message:focus {
  box-shadow: inset 5px 5px 8px #a7a7a7, inset -5px -5px 8px #f5f5f5;
}

<div id="message-main">
  <label class="label is-required" for="message">Ihre Nachricht</label>
  <textarea id="message" class="inputfields required" name="message" rows="10" cols="46" placeholder="Schreiben Sie uns Ihre Nachricht." maxlength="1250" spellcheck="true" required></textarea>
</div>

Answer 2

有了以上帮助，我能够在保留阴影方向的情况下解决我的问题：

      box-shadow: inset 5px 5px 8px transparent,
      inset -5px -5px 8px transparent, 5px 5px 8px #a7a7a7,
      -5px -5px 8px #f5f5f5;

谢谢。