用css实现透明图片阴影效果

效果

box-shadow

drop-shadow

你是否使用过 box-shadow 为透明的图片添加阴影，却让其看起来像添加了一个边框一样？然而解决方案是使用 drop-shadow。

drop-shadow 的工作方式是，其遵循给给定图片的 Alpha 通道。因此阴影是基于图片的内部形状，而不是显示在图片外面。

HTML

<div class="transparent-shadow">
  <div class="margin-right">
    <div class="margin-bottom align-center">
      box-shadow
    </div>
      <img class="box-shadow" src="/editor-md/images/logos/editormd-logo-64x64.png" alt="box-shadow example (transparent)">
  </div>
    
  <div>
    <div class="margin-bottom align-center">
      drop-shadow
    </div>
    <a href="/editor-md/" target="_blank">
      <img class="drop-shadow" src="/editor-md/images/logos/editormd-logo-64x64.png" alt="drop-shadow example (transparent)">
    </a>
  </div>
</div>

Style

.transparent-shadow {
  height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.margin-right {
  margin-right: 2em;
}

.margin-bottom {
  margin-bottom: 1em;
}

.align-center {
  text-align: center;
}

.box-shadow {
  box-shadow: 2px 4px 8px #3723a1;
}

.drop-shadow {
  filter: drop-shadow(2px 4px 8px #3723a1);
}