为什么过渡属性不适用于 box-shadow？答案

【问题标题】：Why is the transition property not working for box-shadow?为什么过渡属性不适用于 box-shadow？
【发布时间】：2022-08-19 03:44:59
【问题描述】：

我想通过转换box-shadow 来创建平滑的悬停按钮效果。为什么悬停过渡不起作用？哪些错误可能导致它无法按预期运行？

body{
  background: rgb(180, 181, 180);
 }
.btn{
  height: 100px;
  width: 100px;
  margin: auto;
  border-radius: 20%;
  background: rgb(172, 171, 171);
  box-shadow: 3px 3px 5px rgb(84, 84, 84),-3px -3px 5px rgb(255, 255, 255);
  transition: box-shadow 1s ease-in-out;
  background-image: linear-gradient(135deg,rgb(215, 215, 215),rgb(84, 84, 84));
}

.btn:hover{
  transition: box-shadow 1s ease-in-out;
  box-shadow: inset 3px 3px 5px rgb(84, 84, 84),inset -3px -3px 5px rgb(255, 255, 255);
}

<!DOCTYPE html>
<html lang=\"en\">
<head>
    <meta charset=\"UTF-8\">
    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">
    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
    <title>Document</title>
</head>
<body>
    <div class=\"btn\"></div>
</body>
</html>

标签： css button hover css-transitions

【解决方案1】：

您不能在 inset 和非嵌入阴影之间进行过渡。确保您始终拥有它们并使用颜色不透明度：

 body{
  background: rgb(180, 181, 180); 
}
.btn{
  height: 100px;
  width: 100px;
  margin: auto;
  border-radius: 20%;
  background: rgb(172, 171, 171);
  box-shadow: 
    inset 3px 3px 5px rgb(84 84 84 / 0%),
    inset -3px -3px 5px rgb(255 255 255 / 0%),
     3px 3px 5px rgb(84 84 84),
    -3px -3px 5px rgb(255 255 255);
  transition: box-shadow 1s ease-in-out;
  background-image: linear-gradient(135deg,rgb(215, 215, 215),rgb(84, 84, 84));
}

.btn:hover{
  box-shadow: 
    inset 3px 3px 5px rgb(84 84 84),
    inset -3px -3px 5px rgb(255 255 255),
     3px 3px 5px rgb(84 84 84 / 0%),
    -3px -3px 5px rgb(255 255 255 / 0%);
}

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

您也可以使用该位置：

body{
 background: rgb(180, 181, 180); 
}
.btn{
  height: 100px;
  width: 100px;
  margin: auto;
  border-radius: 20%;
  background: rgb(172, 171, 171);
  box-shadow: 
    inset 0 0 0 rgb(84 84 84 / 0%),
    inset 0 0 0 rgb(255 255 255 / 0%),
     3px 3px 5px rgb(84 84 84),
    -3px -3px 5px rgb(255 255 255);
  transition: box-shadow 1s ease-in-out;
  background-image: linear-gradient(135deg,rgb(215, 215, 215),rgb(84, 84, 84));
}

.btn:hover{
  box-shadow: 
    inset 3px 3px 5px rgb(84 84 84),
    inset -3px -3px 5px rgb(255 255 255),
     0 0 0 rgb(84 84 84 / 0%),
     0 0 0 rgb(255 255 255 / 0%);
}

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

【讨论】：

【解决方案2】：

如果您想在非:hovered 状态的元素上为inset box-shadow 设置transition必须也可以是inset box-shadow。

您可以通过创建新的父元素并在新元素上设置 inset box-shadow 和 transition 来解决此问题。

.btn {
  box-shadow: inset 3px 3px 5px rgb(84 84 84 / 0%), inset -3px -3px 5px rgb(255 255 255 / 0%), 3px 3px 5px rgb(84 84 84), -3px -3px 5px rgb(255 255 255);
}

.btn-container:hover {
  box-shadow: inset 3px 3px 5px rgb(84, 84, 84), inset -3px -3px 5px rgb(255, 255, 255);
}

.btn-container {
  background-image: linear-gradient(135deg, rgb(215, 215, 215), rgb(84, 84, 84));
  transition: box-shadow 1s ease-in-out;
  height: 100px;
  width: 100px;
  border-radius: 20%;
  box-shadow: inset 3px 3px 5px rgb(84 84 84 / 0%), inset -3px -3px 5px rgb(255 255 255 / 0%), 3px 3px 5px rgb(84 84 84), -3px -3px 5px rgb(255 255 255);
  margin: auto;
}

body {
  background: rgb(172, 171, 171);
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div class="btn-container">
    <div class="btn"></div>
  </div>
</body>

</html>

【讨论】：

body { background: rgb(180, 181, 180); } 请在您的代码上添加此背景颜色。所以我可以看到并理解。我忘了在我的代码中添加这个。