html - 圆化盒子阴影内的内 Angular ？

Question

如何将 box-shadow 内的内 Angular 变成圆 Angular ？

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

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>

Answer 1

问题不是盒子阴影，而是边框上的渐变与半径相结合。基于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>

如果您只想要内 Angular ，您可以使用基于 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, darkgreen, 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,transparent 98%,#fff 100%) bottom left / var(--r),
     radial-gradient(farthest-side at bottom left ,transparent 98%,#fff 100%) top right   / var(--r),
     radial-gradient(farthest-side at top    left ,transparent 98%,#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, darkgreen, lightgreen);
  
}

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