背景图像边框半径-白色角

Question

我试图用CSS和JS在悬停上创建倾斜效果。我使用了Vanilla Tilt JS库，效果很好。

我想在需要悬停时需要倾斜的图像上添加底影，但是白角出现问题。图片以border-radius取整，当我将鼠标悬停在底角时，白色在图片和阴影之间。

问题：

我的代码：https://jsfiddle.net/p8gzcnut/5/

有人可以给我提示如何解决此问题吗？

我尝试将overflow设置为none，但是它会消除阴影。另外，我试图“调整”阴影的大小，但这也无济于事。

Answer 1

在.card-container上留下阴影，您可以应用overflow:hidden：

.card-container {
    width: 260px;
    height: 380px;
    background-position: 50% center;
    background-size: cover;
    border-radius: 15px;
    overflow:hidden;
  }

  .card-container:hover {
    box-shadow: 0 20px 70px -30px rgba(51, 51, 51, 0.7), 0 50px 100px 0 rgba(51, 51, 51, 0.2);
    transition: .3s;
  }

<div class="container">
  <div class="row">
    <div class="col-md-4 text-center">
      <!-- One Card Code -->
      <div class="card-container" style="background-image:url(https://cdn2.unrealengine.com/Unreal+Engine%2FTeaser-Image-3-944x720-54a0ac93e369fd0ee577012df4f1dcd5da67c281.jpg);"
                                  data-tilt=""
                                  data-tilt-glare="true"
                                  data-tilt-max-glare="0.5"
                                  data-tilt-speed="400"
                                  data-tilt-scale="1.08"
                                  data-tilt-max="40"
                                  data-tilt-perspective="500"
                                  style="will-change: transform; transform: perspective(500px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1);
                                "></div>
      <!-- One Card Code END -->
    </div>
    <div class="col-md-4 text-center">
      <div class="card-container" style="background-image:url(https://cdn2.unrealengine.com/Unreal+Engine%2FTeaser-Image-2-944x720-e9951a49084478d378346e46bdb026c0b989a479.jpg);"
                                  data-tilt=""
                                  data-tilt-glare="true"
                                  data-tilt-max-glare="0.5"
                                  data-tilt-speed="400"
                                  data-tilt-scale="1.08"
                                  data-tilt-max="40"
                                  data-tilt-perspective="500"
                                  style="will-change: transform; transform: perspective(500px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1);
                                "></div>
    </div>
    <div class="col-md-4 text-center">
      <div class="card-container" style="background-image:url(https://cdn2.unrealengine.com/Unreal+Engine%2FTeaser-Image-944x720-d7a738407387149cc4e941dd18e9486a0c89bb51.jpg);"
                                  data-tilt=""
                                  data-tilt-glare="true"
                                  data-tilt-max-glare="0.5"
                                  data-tilt-speed="400"
                                  data-tilt-scale="1.08"
                                  data-tilt-max="40"
                                  data-tilt-perspective="500"
                                  style="will-change: transform; transform: perspective(500px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1);
                                "></div>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.4.1/vanilla-tilt.min.js"></script>

Answer 2

.card-container {
    width: 260px;
    height: 380px;
    background-position: 50% center;
    background-size: cover;
    border-radius: 15px;
    overflow: hidden;
  }
  .card-container:hover {
    box-shadow: 0 20px 70px -30px rgba(51, 51, 51, 0.7), 0 50px 100px 0 rgba(51, 51, 51, 0.2);
    z-index: 10;
    -webkit-transform: translateZ(-50px);
    transform: translateZ(-50px);
    -webkit-transition: .3s;
    transition: .3s;
  }
  .card-container:hover:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
  }

<div class="container">
  <div class="row">
    <div class="col-md-4 text-center">
      <!-- One Card Code -->
      <div class="card-container" style="background-image:url(https://cdn2.unrealengine.com/Unreal+Engine%2FTeaser-Image-3-944x720-54a0ac93e369fd0ee577012df4f1dcd5da67c281.jpg);"
                                  data-tilt=""
                                  data-tilt-glare="true"
                                  data-tilt-max-glare="0.5"
                                  data-tilt-speed="400"
                                  data-tilt-scale="1.08"
                                  data-tilt-max="40"
                                  data-tilt-perspective="500"
                                  style="will-change: transform; transform: perspective(500px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1);
                                "></div>
      <!-- One Card Code END -->
    </div>
    <div class="col-md-4 text-center">
      <div class="card-container" style="background-image:url(https://cdn2.unrealengine.com/Unreal+Engine%2FTeaser-Image-2-944x720-e9951a49084478d378346e46bdb026c0b989a479.jpg);"
                                  data-tilt=""
                                  data-tilt-glare="true"
                                  data-tilt-max-glare="0.5"
                                  data-tilt-speed="400"
                                  data-tilt-scale="1.08"
                                  data-tilt-max="40"
                                  data-tilt-perspective="500"
                                  style="will-change: transform; transform: perspective(500px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1);
                                "></div>
    </div>
    <div class="col-md-4 text-center">
      <div class="card-container" style="background-image:url(https://cdn2.unrealengine.com/Unreal+Engine%2FTeaser-Image-944x720-d7a738407387149cc4e941dd18e9486a0c89bb51.jpg);"
                                  data-tilt=""
                                  data-tilt-glare="true"
                                  data-tilt-max-glare="0.5"
                                  data-tilt-speed="400"
                                  data-tilt-scale="1.08"
                                  data-tilt-max="40"
                                  data-tilt-perspective="500"
                                  style="will-change: transform; transform: perspective(500px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1);
                                "></div>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.4.1/vanilla-tilt.min.js"></script>