元素三个侧面的css过滤器答案

【问题标题】：css filter on three sides of element元素三个侧面的css过滤器
【发布时间】：2020-12-07 09:48:37
【问题描述】：

在下面的示例中，除了顶部之外，我在所有侧面都需要一个 drop-shadow
我试过这个 - 没有成功

filter:drop-shadow(-3px 3px 3px rgba(0,0,0,0.3), 3px 3px 3px rgba(0,0,0,0.3));

.story{
width:50vw;
margin:0 auto;
height:50vh;
background:orange;
border-radius:0 0 14px 14px;
filter:drop-shadow(-3px 3px 3px rgba(0,0,0,0.3));
}

&lt;div class='story'&gt;&lt;/div&gt;

【问题讨论】：

标签： html css css-filters

【解决方案1】：

考虑一个clip-path，它只会剪辑顶部，然后你可以使用基本的盒子阴影（或投影）

.story {
  width: 50vw;
  margin: 0 auto;
  height: 50vh;
  background: orange;
  border-radius: 0 0 14px 14px;
  box-shadow:0px 3px 5px 3px rgba(0, 0, 0, 0.5);
  clip-path:polygon(-50px 0,calc(100% + 50px) 0,calc(100% + 50px) calc(100% + 50px),-50px calc(100% + 50px))
}

&lt;div class='story'&gt;&lt;/div&gt;

要理解剪辑路径在做什么：

.story {
  width: 50vw;
  margin: 0 auto;
  height: 50vh;
  background: orange;
  border-radius: 0 0 14px 14px;
  box-shadow:0px 0 0 100vmax red;
  clip-path:polygon(-50px 0,calc(100% + 50px) 0,calc(100% + 50px) calc(100% + 50px),-50px calc(100% + 50px))
}

&lt;div class='story'&gt;&lt;/div&gt;

【讨论】：

【解决方案2】：

不确定 css 中是否有内置方式来执行此操作。我复制了 div 并将其放在第一个的顶部，并在右侧添加了阴影。嗯……

.story {
  width: 50vw;
  margin: 0 auto;
  height: 50vh;
  background: orange;
  border-radius: 0 0 14px 14px;
  filter: drop-shadow(-3px 3px 3px black);
}

.story2 {
  width: 50vw;
  margin: 0 auto;
  height: 50vh;
  background: orange;
  filter: drop-shadow(2px 3px 3px black);
}

<div class='story'>
  <div class='story2'></div>
</div>

【讨论】：

或者this。
投影在视觉上比盒子阴影更好，这就是我想要第一个的原因。您的解决方案在技术上还可以，但我希望有更原生的方式
S**t，这是在原始 Q 中吗？它没有注册。