CSS中添加两个过渡效果均无效的问题求助

嘿，我来帮你排查一下过渡效果失效的问题，你的代码里有几个小细节需要调整：

主要问题分析 #

• 过渡属性被覆盖：你写了两个独立的transition声明，CSS里后面的声明会直接覆盖前面的，所以只有filter的过渡能生效，transform的过渡被完全忽略了。要把多个过渡效果合并到同一个transition里，用逗号分隔即可。
• Filter属性被覆盖：在hover状态里，你同样写了两个filter声明，第二个drop-shadow会替换掉第一个saturate，导致饱和效果根本不会触发。多个滤镜效果可以在同一个filter规则里用空格分隔，这样就能同时生效。
• 无效属性冗余：round-corner不是有效的CSS属性，你已经写了border-radius:10px，这个冗余的属性可以直接删掉。

修正后的完整代码 #

<!DOCTYPE html>
<html>
<head>
<style>
div a { 
  text-decoration: none; 
  color: yellow; 
  font-size: 20px; 
  padding: 15px; 
  display: inline-block; 
  background-color: green; 
  filter: saturate(0); 
  /* 合并多个过渡效果，用逗号分隔 */
  transition: transform .2s, filter .5s; 
  border-radius: 10px 
}
div a:hover {
  background-color: green;
  /* 合并多个滤镜效果，用空格分隔 */
  filter: saturate(100%) drop-shadow(10px 10px 5px black);
  border-radius: 10px;
  transform: scale(1.1); /* scale首字母小写更符合CSS规范 */
}
</style>
</head>
<body>
<div>
<a href="#">Sample</a>
</div> <!-- 补充了缺失的div闭合标签，避免HTML结构错误影响样式 -->
</body>
</html>

额外小提示 #

我还帮你补充了缺失的</div>闭合标签，HTML结构不完整也可能间接导致样式或交互异常；另外CSS属性名scale建议用小写，虽然浏览器对大小写不敏感，但遵循规范能避免一些潜在的兼容问题。

内容的提问来源于stack exchange，提问作者Alex