html - 父div溢出隐藏时如何设置框阴影底部？

Question

大家好，我想要不更改 div 结构的框阴影 我试图在内容列中设置框阴影，但我设置溢出隐藏在优势框 div 中，因为我还想在主潜水悬停时悬停背景图像 div 比例删除溢出隐藏的 CSS 比背景图像潜水显示在主 div 之外所以我设置溢出隐藏。当您删除隐藏的溢出而不是显示阴影时，这可能是阴影，但我的背景图像缩放效果显示不好。这类问题的解决方案是什么

.features-box {
                padding: 100px 0;
                background-color: rgba(56,74,100,.1);
            }
            .content {
                padding: 30px;
                background-color: #fff;
                position: relative;
            }
            .content:after {
                content: '';
                position: absolute;
                width: 100%;
                bottom: 0;
                height: 2px;
                left: 0;
                -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,.06);
                -ms-box-shadow: 0 2px 2px 0 rgba(0,0,0,.06);
                box-shadow: 0 2px 2px 0 rgba(0,0,0,.06);
                z-index: 9;
            }
            .advantages-box {
                overflow: hidden;
            }
            .advantages-box .left {
                -webkit-transition: .3s;
                -moz-transition: .3s;
                -ms-transition: .3s;
                transition: .3s;
            }
            .advantages-box:hover .left {
                -webkit-transform: scale(1.1);
                -moz-transform: scale(1.1);
                -ms-transform: scale(1.1);
                transform: scale(1.1);
            }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<section class="features-box">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-xl-10 advantages-box">
                        <div class="row h-100">
                            <div class="col-6 h-100 p-0 position-relative left" style="background-image: url(http://placekitten.com/1000/500); background-repeat: no-repeat; background-position: center center;">
                            </div>
                            <div class="col-6 h-100 p-0 position-relative right">
                                <div class="content d-flex flex-column align-items-start text-left h-100">
                                    <h5>What is Lorem Ipsum one?</h5>
                                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
                                    <h5>What is Lorem Ipsum two?</h5>
                                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

Answer 1

使图像成为一个额外的元素，你只需要在它的父元素上应用溢出:

.features-box {
  padding: 100px 0;
  background-color: rgba(56, 74, 100, .1);
}

.content {
  padding: 30px;
  background-color: #fff;
  position: relative;
}

.content:after {
  content: '';
  position: absolute;
  width: 100%;
  bottom: 0;
  height: 2px;
  left: 0;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .6);
  z-index: 9;
}

.advantages-box .left {
  overflow: hidden;
}

.advantages-box .left img {
  height: 100%;
  width: 100%;
  object-fit: none;
  transition: .3s;
}

.advantages-box:hover .left img {
  transform: scale(1.1);
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<section class="features-box">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-xl-10 advantages-box">
        <div class="row h-100">
          <div class="col-6 h-100 p-0 position-relative left">
            <img src="http://placekitten.com/1000/500">
          </div>
          <div class="col-6 h-100 p-0 position-relative right">
            <div class="content d-flex flex-column align-items-start text-left h-100">
              <h5>What is Lorem Ipsum one?</h5>
              <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
              <h5>What is Lorem Ipsum two?</h5>
              <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

如果要保留背景图片:

.features-box {
  padding: 100px 0;
  background-color: rgba(56, 74, 100, .1);
}

.content {
  padding: 30px;
  background-color: #fff;
  position: relative;
}

.content:after {
  content: '';
  position: absolute;
  width: 100%;
  bottom: 0;
  height: 2px;
  left: 0;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .6);
  z-index: 9;
}

.advantages-box .left {
  overflow: hidden;
}

.advantages-box .left div {
  height:100%;
  background-position:center;
  background-repeat:no-repeat;
  transition: .3s;
}

.advantages-box:hover .left div {
  transform: scale(1.1);
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<section class="features-box">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-xl-10 advantages-box">
        <div class="row h-100">
          <div class="col-6 h-100 p-0 position-relative left">
          <div style="background-image:url(http://placekitten.com/1000/500)"></div>
          </div>
          <div class="col-6 h-100 p-0 position-relative right">
            <div class="content d-flex flex-column align-items-start text-left h-100">
              <h5>What is Lorem Ipsum one?</h5>
              <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
              <h5>What is Lorem Ipsum two?</h5>
              <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

另一种不改变HTML的想法是后台依赖伪元素和继承:

.features-box {
  padding: 100px 0;
  background-color: rgba(56, 74, 100, .1);
}

.content {
  padding: 30px;
  background-color: #fff;
  position: relative;
}

.content:after {
  content: '';
  position: absolute;
  width: 100%;
  bottom: 0;
  height: 2px;
  left: 0;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .6);
  z-index: 9;
}

.advantages-box .left {
  overflow: hidden;
  position:relative;
  z-index:0;
}
.advantages-box .left:before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:inherit;
  transition: .3s;
}

.advantages-box:hover .left:before {
  transform: scale(1.1);
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<section class="features-box">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-xl-10 advantages-box">
        <div class="row h-100">
          <div class="col-6 h-100 p-0 position-relative left" style="background-image: url(http://placekitten.com/1000/500); background-repeat: no-repeat; background-position: center center;">
          </div>
          <div class="col-6 h-100 p-0 position-relative right">
            <div class="content d-flex flex-column align-items-start text-left h-100">
              <h5>What is Lorem Ipsum one?</h5>
              <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
              <h5>What is Lorem Ipsum two?</h5>
              <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>