如何将框阴影转换为过滤器阴影？

Question

Is there a way to convert box-shadow property value to filter drop-shadow?有没有办法将 box-shadow 属性值转换为过滤阴影？

I have tried doing this:我试过这样做：

 .boxes-container { display: flex; justify-content: center; }.boxshadow-box, .filter-dropshadow-box { display: block; background-color: green; margin: 50px; padding: 50px; width: 150px; box-sizing: border-box; }.boxshadow-box { box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); }.filter-dropshadow-box { filter: drop-shadow(5px 5px 3px rgba(0, 0, 0, 0.2)) drop-shadow(8px 10px 1px rgba(0, 0, 0, 0.14)) drop-shadow(3px 14px 2px rgba(0, 0, 0, 0.12)); }

 <div class="boxes-container"> <div class="boxshadow-box"></div> <div class="filter-dropshadow-box"></div> </div>

But I can't reach the same results for drop-shadow as box-shadow.但是我无法达到与 box-shadow 相同的阴影效果。

Answer 1

Can you please check the below code?你能检查下面的代码吗？ Hope it will work for you.希望它对你有用。 By Mistake, you passed the wrong value in filter drop-shadow.错误地，您在过滤器阴影中传递了错误的值。

 .boxes-container { display: flex; justify-content: center; }.boxshadow-box, .filter-dropshadow-box { display: block; background-color: green; margin: 50px; padding: 50px; width: 150px; box-sizing: border-box; }.boxshadow-box { box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); }.filter-dropshadow-box { -webkit-filter: drop-shadow( 0px 5px 5px rgba(0, 0, 0, 0.2)) drop-shadow( 0px 8px 10px rgba(0, 0, 0, 0.14)); filter: drop-shadow( 0px 5px 5px rgba(0, 0, 0, 0.2)) drop-shadow( 0px 8px 10px rgba(0, 0, 0, 0.14)); }

 <div class="boxes-container"> <div class="boxshadow-box"></div> <div class="filter-dropshadow-box"></div> </div>

如何将框阴影转换为过滤器阴影？

问题描述

1 个解决方案

解决方案1
1 已采纳 2021-01-20 06:30:12

如何将框阴影转换为过滤器阴影？

问题描述

1 个解决方案

解决方案1 1 已采纳 2021-01-20 06:30:12

解决方案1
1 已采纳 2021-01-20 06:30:12