Css 为什么过渡属性不适用于 boxshadow

发布于08月12日

我想通过转换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>

推荐答案

不能在inset和非插图阴影之间过渡.确保你总是同时拥有这两种 colored颜色，并玩 colored颜色不透明游戏:

 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%);
}

 <div class="btn"></div>

你也可以玩弄这个位置:

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%);
}