时间戳

首页 > 解决方案 > 圆盒子阴影内的内角？

html - 圆盒子阴影内的内角？

问题描述

我怎样才能把里面的内角弄圆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>

标签： htmlcssborder

解决方案

问题不是盒子阴影，而是边界上的渐变与半径相结合。基于这个答案，你可以这样做：

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>

如果你只想要内角，你可以根据这个答案使用不同的面具

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>

推荐阅读