css 在元素的三边过滤

Question

在下面的示例中，除了顶部
之外，我需要在所有侧面都使用 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));
}

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

Answer 1

不确定 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>

Answer 2

考虑一个 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))
}

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

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

.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))
}

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

css 在元素的三边过滤

css filter on three sides of element

html

css

css-filters