box-shadow inset leaves dark edge on a div

问题: I've got a div on which i want to put an inset shadow to achieve a smooth Transition to the Background. The Problem is, that the outer most ring of Pixels is not affected b...

问题:

I've got a div on which i want to put an inset shadow to achieve a smooth Transition to the Background. The Problem is, that the outer most ring of Pixels is not affected by the shadow. If you take the border radius out the Problem is still present, but affects only the Bottom side of the rectangle.

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

The divs do not contain anything.

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

I searched stackoverflows archives for a solution, but didn't find anything. I tried to cover it up with a border with the same Color as the Background and shadow, but it actually made it worse.


回答1:

If you don’t want to alter the markup or use a pseudo element, you can add background-clip: content-box; padding: 1px; to hide the edge.

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


回答2:

Replace it with a pseudo element:

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

Really odd that it does that. Here's a workaround:

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

Have a div inside your image div and set the box shadow on that, then set it's border-radius to 45% instead of 50%.

  • 发表于 2020-06-27 19:23
  • 阅读 ( 83 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除