一起创建倒置边框半径和 box-shadow答案

【问题标题】：Creating inverted border radius and box-shadow together一起创建倒置边框半径和 box-shadow
【发布时间】：2021-11-19 08:27:19
【问题描述】：

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

但是，由于box-shadow，很难创建它。我尝试了很多解决方案，例如使用box-shadow inset，或者使用clip-path 过滤器drop-shadow，但效果不佳。

我在这一点上：

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>
-->

我尝试使用带有多个clip-path 的svg 来在css 上引用它。

原图：

【问题讨论】：

圆形钻头从白色到灰色的径向渐变背景和直线钻头的线性渐变怎么样？

标签： html css svg clip-path

【解决方案1】：

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

body {
  background: silver
}

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

&lt;div class="dashed"&gt;&lt;/div&gt;

【讨论】：

此答案更适用于具有相同代码的 Safari 和 Chrome。此外，移动到响应式元素更容易。

【解决方案2】：

这是一种方法：对于票的开头和结尾的孔，您可以使用 before 和 after 元素。两个伪元素都是透明的，带有一个大的白框阴影：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;
}

&lt;div class="dashed"&gt;&lt;/div&gt;

【讨论】：