使用 drop-shadow() 函数在图像上创建阴影效果

当使用透明图像时,可以使用 drop-shadow() 函数在图像上创建阴影,而不是使用 box-shadow 属性在元素的整个框后面创建矩形阴影:

HTML 代码:

<div class="wrapper">
  <div class="mr-2">
    <div class="mb-1 text-center">
      box-shadow
    </div>
    
    <img class="box-shadow" src="https://media.mybj123.com/wp-content/uploads/2022/02/1645063136-88a530b9e9ad42b.png" alt="Image with box-shadow">
  </div>
    
  <div>
    <div class="mb-1 text-center">
      drop-shadow
    </div>
    
    <img class="drop-shadow" src="https://media.mybj123.com/wp-content/uploads/2022/02/1645063136-88a530b9e9ad42b.png" alt="Image with drop-shadow">
  </div>
</div>

CSS 代码:

.wrapper {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

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

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

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

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

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

效果对比如下:

使用 drop-shadow() 函数在图像上创建阴影

「点点赞赏,手留余香」

1

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 使用 drop-shadow() 函数在图像上创建阴影效果

发表回复