box-shadow 插图在 div 上留下暗边

Question

我有一个 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>

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

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

Answer 2

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

.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%。

Answer 3

用伪元素替换：

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

box-shadow 插图在 div 上留下暗边

box-shadow inset leaves dark edge on a div

html

css

css-grid

box-shadow