使用 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() 函数在图像上创建阴影效果
码云笔记 » 使用 drop-shadow() 函数在图像上创建阴影效果