绕过盒子阴影内的内角？

问题描述

如何将 Box-shadow 内的内角倒圆？

如果我将 border-radius 增加到 80px，那么我会在 Box-shadow 和角落之间看到一些空白。

div#secondSample {
  width: 100%;
  height: 500px;
}

div#secondSample div#grid div {
  position: absolute;
  width: 250px;
  height: 250px;
  margin: 0 auto;
  overflow: hidden;
  top: 10px;
  left: 10px;
  border-radius: 10px;
  Box-shadow: 3px 3px 20px 10px #0000FF,inset 3px 3px 20px 10px #0000FF80;
}

div#secondSample div#grid div:after {
  content: "need round these four corners here";
  position: absolute;
  width: 150px;
  height: 150px;
  border-radius: 80px;
  border: 50px solid;
  Box-shadow: inset 3px 3px 20px 10px green;
  border-image-slice: 1;
    border-image-source: linear-gradient(to left,darkgreen,lightgreen);
    color:#000;
    
}

<div id="secondSample">
  <div id="grid">
    <div></div>
  </div>
</div>

解决方法

问题不是 box-shadow 而是边框上的渐变与半径相结合。根据 this answer，您可以按照以下方式进行操作：

div#grid div {
  position: relative;
  width: 250px;
  height: 250px;
  margin: 20px auto;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 3px 3px 20px 10px #0000FF,inset 3px 3px 20px 10px #0000FF80;
}

div#grid div:after {
  content: "need round these four corners here";
  position: absolute;
  width: 150px;
  height: 150px;
  border-radius: 80px;
  border: 50px solid transparent;
  box-shadow: inset 3px 3px 20px 10px green;
}

div#grid div:before {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  padding: 50px;
  border-radius: 80px;
  background: linear-gradient(to left,darkgreen,lightgreen);
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
}

<div id="grid">
  <div></div>
</div>

如果你只想要内角，你可以使用基于 this answer

的不同掩码

div#grid div {
  position: relative;
  width: 250px;
  height: 250px;
  margin: 20px auto;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 3px 3px 20px 10px #0000FF,inset 3px 3px 20px 10px #0000FF80;
}

div#grid div:after{
  content: "need round these four corners here";
  position: absolute;
  width: 150px;
  height: 150px;
  border-radius: 80px;
  border: 50px solid transparent;
  box-shadow: inset 3px 3px 20px 10px green;
}


div#grid div:before {
  content:"";
  position: absolute;
  width: 150px;
  height: 150px;
  padding: 50px;
  background: linear-gradient(to left,lightgreen);
  --r: 30px 30px content-box; /* control the radius here */
  -webkit-mask: 
     radial-gradient(farthest-side at bottom right,transparent 98%,#fff 100%) top left    / var(--r),radial-gradient(farthest-side at top    right,#fff 100%) bottom left / var(--r),radial-gradient(farthest-side at bottom left,#fff 100%) top right   / var(--r),radial-gradient(farthest-side at top    left,#fff 100%) bottom right/ var(--r),linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  -webkit-mask-repeat:no-repeat;
  mask-composite: exclude;
  
}

<div id="grid">
    <div></div>
  </div>

如果您不想要透明度，只需如下所示：

div#grid div {
  position: relative;
  width: 250px;
  height: 250px;
  margin: 20px auto;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 3px 3px 20px 10px #0000FF,inset 3px 3px 20px 10px #0000FF80;
}

div#grid div:after{
  content: "need round these four corners here";
  position: absolute;
  width: 150px;
  height: 150px;
  border-radius: 80px;
  border: 50px solid transparent;
  background:#fff padding-box;
  box-shadow: inset 3px 3px 20px 10px green;
}


div#grid div:before {
  content:"";
  position: absolute;
  width: 150px;
  height: 150px;
  padding: 50px;
  background: linear-gradient(to left,lightgreen);
  
}

<div id="grid">
    <div></div>
  </div>