一起创建反向边框半径和框阴影

Question

我想创建一个倒转的边框半径，类似于：

但是，由于 box-shadow，很难创建它。我已经尝试了很多解决方案，例如使用 box-shadow 插图，或者过滤器 drop-shadow 和 clip-path 没有很好的结果。

我在这一点上：

body {
  height: 100vh;
  display: grid;
  place-items: center;
  margin: 0;
  background: white;
}

.wrapper {
  width: 100%;
  //filter: drop-shadow(0 0 2rem #0000005c);
}

.header {
   background-color: #efefef;
   width: 85%;
   aspect-ratio: 16/3;
   border-radius: 1.5rem;
   border: 1px solid #d0d0d0;
   box-shadow: 0 0 2rem #0000005c;
  position: relative;
  margin: 0 auto;
  //clip-path: url(#myClip);
}

.dashed {
    width: 100%;
    position: absolute;
    top: 50%;
    border-bottom: 1px dashed black;
}

  
  .dashed:after {
    content: '';
    position: absolute;
    width: 8rem;
    height: 4rem;
    background: white;
    left: -7rem;
    top: -2rem;
    border-radius: 0 2rem 2rem 0;
    box-shadow: 0 0 2rem #0000005c inset;
    clip-path: inset(0 0 0 80%);
  }

<div class="wrapper">
  <div class="header">
    <div class="dashed"></div>
  </div>
</div>

<!--
<svg width="0" height="0">
  <defs>
    <clipPath id="myClip">
        <circle cx="50" cy="50" r="50" />
<rect width = "10000" height = "10000"
    </clipPath>
  </defs>
</svg>
-->

我试过使用 svg 和多个 clip-path 来在 css 上引用它。

原始完整图片：

Answer 1

这是一种实现方法：对于门票开始和结束处的孔，您可以使用前后元素。两个伪元素都是透明的，带有一个大的白色框阴影：box-shadow: 0px 0px 1px 50vw white;。由于 .dashed 元素具有 overflow:hidden，您将仅在 .dashed 内部看到伪元素的框阴影，并且看起来好像 .dashed 具有白色背景。

对于外部阴影，您现在可以根据需要使用投影滤镜。

body{background:silver}

.dashed {
    width: 90%;
    height:200px;
    position: absolute;
    margin: auto;
    top: 0; bottom:0;
    left:0;right:0;
    overflow:hidden;
    min-width:250px;
  
  filter: drop-shadow(0 0 2rem black);
}

.dashed:before,.dashed:after{
  content:"";
  display:inline-block;
  width:100px;
  height:100px;
  background:none;
  border-radius:50%;
  position:absolute;
  box-shadow: 0px 0px 1px 50vw white;
}

.dashed:before{
  left:-50px;
  top:50px;
}

.dashed:after{
  left:calc(100% - 50px);
  top:50px;
}

<div class="dashed"></div>

Answer 2

考虑到渐变着色，您可以使用简化的代码：

body {
  background: silver
}

.dashed {
  width: 90%;
  height: 200px;
  margin: 50px auto;
  min-width: 250px;
  background: 
    radial-gradient(50px at left , #0000 98%, #fff) left, 
    radial-gradient(50px at right, #0000 98%, #fff) right;
  background-size: 51% 100%;
  background-repeat: no-repeat;
  filter: drop-shadow(0 0 2rem black);
}

<div class="dashed"></div>

一起创建反向边框半径和框阴影

Creating inverted border radius and box-shadow together

html

css

svg

clip-path