如何使CSS投影响应？

Question

我将以下投影应用于SVG图像。这个问题是当网站缩小到较低的分辨率时，阴影越来越远离图像。阴影滤镜不允许您使用百分比。

#turqLogo img
{

 display: block;
 margin: auto;
 width: 4%;
 -webkit-filter: drop-shadow(.5em 0px 0px black); /* Chrome, Safari, Opera */
 filter: drop-shadow(.5em 0px 0px black);
}

任何人都有诀窍让阴影保持在与不同分辨率的网站观看时相同的位置？

Answer 1

使用1vw代替.5em。

1vw =视口宽度的1％。

 -webkit-filter: drop-shadow(1vw 0px 0px black); /* Chrome, Safari, Opera */
 filter: drop-shadow(1vw 0px 0px black);

示例，svg投影在缩放时保持距离：

Answer 2

尝试根据屏幕宽度重置阴影：

@media (min-width: 300px) { //set there your width

 display: block;
 margin: auto;
 width: 4%;
 -webkit-filter: drop-shadow(.5em 0px 0px black); /* new style here */
 filter: drop-shadow(.5em 0px 0px black);  /* new style here */

 }

只需在样式表中添加，您就会看到一旦页面达到最小宽度，它将重新应用样式到您的组件;）