时间戳

首页 > 解决方案 > CSS3：box-shadow 过渡不适用于伪类

html - CSS3：box-shadow 过渡不适用于伪类

问题描述

我在所有浏览器中的 box-shadow 都遇到了一些奇怪的问题。

我想做的事：

当我的输入处于 :focus 时，平滑我的输入上的框阴影。

问题：

下面的代码工作得很好，过渡很顺利：注意我是如何在“默认”状态下省略 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: 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>

一旦我为默认状态添加了 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: 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>

我到底在这里想念什么？

标签： htmlcss

解决方案

这是因为在后面的代码片段中，您将 box-shadow 的方向从默认（未指定时）outset更改为inset.
运行我的代码片段以更好地理解这一点。还可以阅读这篇关于 box-shadow 过渡性能的精彩文章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>

推荐阅读