css - 为什么阴影看起来不一样？

Question

我有两个具有相同阴影效果的 div，但结果不同。阴影效果在 header div 上显得更亮，这是为什么呢？

#templateHeader {
  background-color: #f5f5f5;
  background-image: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border-top: 0;
  border-bottom: 0;
  padding-top: 0px;
  padding-bottom: 0px;
  border-radius: 5px 5px 0px 0px;
  overflow: hidden;
  filter: drop-shadow(0 5px 10px black)
}

#templateBody {
  background-color: #F5F5F5;
  background-image: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border-top: 0;
  padding-top: 20px;
  padding-bottom: 20px;
  border-radius: 0px 0px 5px 5px;
  filter: drop-shadow(0 5px 10px black)
}