css 剪切路径上的多个框阴影

2vuwiymt 于 2023-01-03 发布在其他

关注(0)|答案(1)|浏览(99)

- bounty将在2天后过期**。回答此问题可获得+50声望奖励。Ravenous希望引起更多人关注此问题。

.box-shadow {
  background: url(https://i.imgur.com/sJL6EDG.jpeg) no-repeat 50%/cover;
  -webkit-box-shadow: 0 0 0 2px red,0 0 0 12px #fff,0 0 0 14px red,0 0 0 24px #fff,0 0 0 26px red,0 0 0 36px #fff,0 0 0 38px red,0 0 0 48px #fff,0 0 0 50px red,0 0 0 60px #fff;
  box-shadow: 0 0 0 2px red,0 0 0 12px #fff,0 0 0 14px red,0 0 0 24px #fff,0 0 0 26px red,0 0 0 36px #fff,0 0 0 38px red,0 0 0 48px #fff,0 0 0 50px red,0 0 0 60px #fff;
  height: 530px;
  margin: 100px;
  position: relative;
  width: 477px
}

.clip-path {
  clip-path: path("M444.248 108.547L271.254 8.76755C250.987 -2.92252 226.016 -2.92252 205.748 8.76755L32.7544 108.547C12.487 120.237 0 141.84 0 165.22V364.779C0 388.159 12.487 409.763 32.7544 421.453L205.748 521.232C226.016 532.923 250.987 532.923 271.254 521.232L444.248 421.453C464.516 409.763 477 388.159 477 364.779V165.22C477 141.84 464.516 120.237 444.248 108.547Z");
}

<div class="box-shadow"></div>
<div class="box-shadow clip-path"></div>

是否有替代方案可以在2中实现与1中相同的框影（或类似）行为？欢迎使用任何其他替代方案（甚至非CSS

css

来源：https://stackoverflow.com/questions/74920506/multiple-box-shadows-on-clipped-path

1条答案

按热度按时间

niwlg2el1#

我使用了类似于下面的代码片段，它远非完美，但它完成了这项工作，并且很容易通过SCSS扩展。

@for $i from 2 through 12 {
  &:nth-child(#{$i}) {
    bottom: -#{16 * $i}px;
    right: -#{16 * $i}px;
    height: calc(530px + #{16 * 2 * $i}px);
    width: calc(477px + #{16 * 2 * $i}px);
  }
}

x一个一个一个一个x一个一个二个x

赞(0）回复(0）举报 2023-01-03

我来回答

css 剪切路径上的多个框阴影

1条答案

相关问题

热门标签

最新问答