box-shadow inset 在 div 上留下暗边答案

【问题标题】：box-shadow inset leaves dark edge on a divbox-shadow inset 在 div 上留下暗边
【发布时间】：2020-06-27 20:06:47
【问题描述】：

我有一个 div，我想在其上放置一个嵌入阴影以实现平滑过渡到背景。问题是，最外层的像素环不受阴影的影响。如果你去掉边界半径，问题仍然存在，但只影响矩形的底部。

https://codepen.io/FrozenYoghurt/pen/WNrjVRx

div 不包含任何内容。

.homescreen2 {
                display: grid;
                grid-gap: 0px;
                width: 100%;
                height: 100vh;
                padding-top: 110px;
                background-color: rgba(250,250,250,1.00);
                grid-template-columns:  repeat(31,  1fr);
                grid-template-rows:       repeat(17, 1fr);
                }
        .hometransition {
                transition: 0.7s;
        box-shadow: 0 0 15px 15px rgba(250,250,250,1) inset;
                }
        .homeimg01 {
                grid-column-start: 10;
                grid-column-end: 15;
                grid-row-start: 3;
                grid-row-end: 7;
                background-size: cover;
                background-position: center;
                background-color: rgba(250,250,250,1.00);
                background-image: url("https://i.postimg.cc/Jz7MbMJ3/cat-1361649-639x426.jpg");
                border-radius: 50%;
                }
        .homeimg01:hover {
                transform: scale(1.1);
                border-radius: 35%;
                }
        .hometext01 {
                grid-column-start: 10;
                grid-column-end: 15;
                grid-row-start: 8;
                grid-row-end: 9;
                }
        .homeimg02 {
                grid-column-start: 21;
                grid-column-end: 26;
                grid-row-start: 4;
                grid-row-end: 8;
                background-size: cover;
                background-position: center;
                background-color: black;
                background-image: url("https://i.postimg.cc/bvsPBgms/cat-1362565-639x647.jpg");
                border-radius: 50%;
                }
        .homeimg02:hover {
                transform: scale(1.1);
                }
        .homeimg03 {
                grid-column-start: 2;
                grid-column-end: 7;
                grid-row-start: 6;
                grid-row-end: 10;
                background-size: cover;
                background-position: center;
                background-color: black;
                background-image: url("https://i.postimg.cc/j2rrCbt7/cat-1378752-640x480.jpg");
                border-radius: 50%;
                }
        .homeimg03:hover {
                transform: scale(1.1);
                }
        .homeimg04 {
                grid-column-start: 26;
                grid-column-end: 31;
                grid-row-start: 9;
                grid-row-end: 13;
                background-size: cover;
                background-position: center;
                background-color: black;
                background-image: url("https://i.postimg.cc/wvNp6v8z/cat-1393633-639x461.jpg");
                border-radius: 50%;
                }
        .homeimg04:hover {
                transform: scale(1.1);
                }
        .homeimg05 {
                grid-column-start: 7;
                grid-column-end: 12;
                grid-row-start: 11;
                grid-row-end: 15;
                background-size: cover;
                background-position: center;
                background-color: black;
                background-image: url("https://i.postimg.cc/wBZz8NrF/cat-1395746-640x480.jpg");
                border-radius: 50%;
                }
        .homeimg05:hover {
                transform: scale(1.1);
                }
        .homeimg06 {
                grid-column-start: 18;
                grid-column-end: 23;
                grid-row-start: 12;
                grid-row-end: 16;
                background-size: cover;
                background-position: center;
                background-color: black;
                background-image: url("https://i.postimg.cc/zGd576Ss/cat-1404368-640x512.jpg");
                border-radius: 50%;
                }
        .homeimg06:hover {
                transform: scale(1.1);
                }

<div class="homescreen2">
    
        <div class="homeimg01 hometransition"></div>
        <div class="homeimg02 hometransition"></div>
        <div class="homeimg03 hometransition"></div>
        <div class="homeimg04 hometransition"></div>
        <div class="homeimg05 hometransition"></div>
        <div class="homeimg06 hometransition"></div>
        
</div>

我在 stackoverflows 档案中搜索了解决方案，但没有找到任何东西。我试图用与背景和阴影颜色相同的边框来掩盖它，但实际上它使情况变得更糟。

【问题讨论】：

标签： html css css-grid box-shadow

【解决方案1】：

如果您不想更改标记或使用伪元素，可以添加background-clip: content-box; padding: 1px; 隐藏边缘。

.homescreen2 {
  display: grid;
  grid-gap: 0px;
  width: 100%;
  height: 100vh;
  padding-top: 110px;
  background-color: rgba(250, 250, 250, 1.00);
  grid-template-columns: repeat(31, 1fr);
  grid-template-rows: repeat(17, 1fr);
}

.hometransition {
  transition: 0.7s;
  box-shadow: 0 0 15px 15px #fff inset;
}

.homeimg01 {
  grid-column-start: 10;
  grid-column-end: 15;
  grid-row-start: 3;
  grid-row-end: 7;
  background-size: cover;
  background-position: center;
  background-color: rgba(250, 250, 250, 1.00);
  background-image: url("https://i.postimg.cc/Jz7MbMJ3/cat-1361649-639x426.jpg");
  background-clip: content-box;
  padding: 1px;
}

<div class="homescreen2">
  <div class="homeimg01 hometransition"></div>
</div>

【讨论】：

它可能看起来适用于这里的小示例，但是当我在提供的 codepen 中尝试相同的事情时，效果仍然存在。
rgba(255, 255, 255, 1) 和 #fff 完全相同。 Stack sn-p 忽略了框具有边框半径的关键细节。
啊，我没有点击codepen链接，我以为是相同的代码。
彻底解决了我的问题，但我不得不问：codepen中的代码和我在这里发布的代码有什么不同？应该是一样的东西。
太好了，很高兴有帮助！回覆。 CodePen，当我最初阅读您的问题时，内联代码 sn-p 只有一个图像示例。 ¯_(ツ)_/¯

【解决方案2】：

用伪元素替换它：

.homescreen2 {
  display: grid;
  grid-gap: 0px;
  width: 100%;
  height: 100vh;
  padding-top: 110px;
  background-color: rgba(250, 250, 250, 1.00);
  grid-template-columns: repeat(31, 1fr);
  grid-template-rows: repeat(17, 1fr);
}

.hometransition {
  transition: 0.7s;
  position:relative;
}
.hometransition::before {
  content:"";
  position:absolute;
  top:-1px;
  left:-1px;
  right:-1px;
  bottom:-1px;
  border-radius:inherit;
  box-shadow: 0 0 16px 16px rgba(250, 250, 250, 1) inset;
}

.homeimg01 {
  grid-column-start: 10;
  grid-column-end: 15;
  grid-row-start: 3;
  grid-row-end: 7;
  background-size: cover;
  background-position: center;
  background-color: rgba(250, 250, 250, 1.00);
  background-image: url("https://i.postimg.cc/Jz7MbMJ3/cat-1361649-639x426.jpg");
  border-radius: 50%;
}

.homeimg01:hover {
  transform: scale(1.1);
  border-radius: 35%;
}

.hometext01 {
  grid-column-start: 10;
  grid-column-end: 15;
  grid-row-start: 8;
  grid-row-end: 9;
}

.homeimg02 {
  grid-column-start: 21;
  grid-column-end: 26;
  grid-row-start: 4;
  grid-row-end: 8;
  background-size: cover;
  background-position: center;
  background-color: black;
  background-image: url("https://i.postimg.cc/bvsPBgms/cat-1362565-639x647.jpg");
  border-radius: 50%;
}

.homeimg02:hover {
  transform: scale(1.1);
}

.homeimg03 {
  grid-column-start: 2;
  grid-column-end: 7;
  grid-row-start: 6;
  grid-row-end: 10;
  background-size: cover;
  background-position: center;
  background-color: black;
  background-image: url("https://i.postimg.cc/j2rrCbt7/cat-1378752-640x480.jpg");
  border-radius: 50%;
}

.homeimg03:hover {
  transform: scale(1.1);
}

.homeimg04 {
  grid-column-start: 26;
  grid-column-end: 31;
  grid-row-start: 9;
  grid-row-end: 13;
  background-size: cover;
  background-position: center;
  background-color: black;
  background-image: url("https://i.postimg.cc/wvNp6v8z/cat-1393633-639x461.jpg");
  border-radius: 50%;
}

.homeimg04:hover {
  transform: scale(1.1);
}

.homeimg05 {
  grid-column-start: 7;
  grid-column-end: 12;
  grid-row-start: 11;
  grid-row-end: 15;
  background-size: cover;
  background-position: center;
  background-color: black;
  background-image: url("https://i.postimg.cc/wBZz8NrF/cat-1395746-640x480.jpg");
  border-radius: 50%;
}

.homeimg05:hover {
  transform: scale(1.1);
}

.homeimg06 {
  grid-column-start: 18;
  grid-column-end: 23;
  grid-row-start: 12;
  grid-row-end: 16;
  background-size: cover;
  background-position: center;
  background-color: black;
  background-image: url("https://i.postimg.cc/zGd576Ss/cat-1404368-640x512.jpg");
  border-radius: 50%;
}

.homeimg06:hover {
  transform: scale(1.1);
}

<div class="homescreen2">

  <div class="homeimg01 hometransition"></div>
  <div class="homeimg02 hometransition"></div>
  <div class="homeimg03 hometransition"></div>
  <div class="homeimg04 hometransition"></div>
  <div class="homeimg05 hometransition"></div>
  <div class="homeimg06 hometransition"></div>

</div>

【讨论】：

【解决方案3】：

它这样做真的很奇怪。这是一个解决方法：

.homescreen2 {
  display: grid;
  grid-gap: 0px;
  width: 100%;
  height: 100vh;
  background-color: rgba(250, 250, 250, 1.00);
  grid-template-columns: repeat(31, 1fr);
  grid-template-rows: repeat(17, 1fr);
}

.hometransition {
  transition: 0.7s;
}

.homeimg01 {
  grid-column-start: 2;
  grid-column-end: 7;
  grid-row-start: 2;
  grid-row-end: 6;
  background-size: cover;
  background-position: center;
  background-color: rgba(0, 0, 0, 1.00);
  background-image: url("https://i.postimg.cc/Jz7MbMJ3/cat-1361649-639x426.jpg");
  border-radius: 50%;
}

.inner {
  height: 100%;
  width: 100%;
  box-shadow: 0 0 15px 15px rgba(250, 250, 250, 1) inset;
  border-radius: 45%;
}

.homeimg01:hover {
  transform: scale(1.1);
}

<div class="homescreen2">
  <div class="homeimg01 hometransition">
    <div class="inner"></div>
  </div>
</div>

在您的图像 div 中有一个 div 并在其上设置盒子阴影，然后将其边框半径设置为 45% 而不是 50%。

【讨论】：