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

作者: xusx 分类: Web 发布时间: 2022-04-27 18:08 浏览:345

效果

box-shadow
box-shadow example (transparent)
drop-shadow
drop-shadow example (transparent)

你是否使用过 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);
}

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!