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

Question

大家好，我想要没有 div 结构更改的框阴影我试图在内容列中设置框阴影，但我设置溢出隐藏在优势框中 div 因为我也想悬停背景图片 div 在主 div 上缩放当我删除隐藏的溢出时悬停 CSS 而不是背景图片 dive 显示在主 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>

Answer 2

你不能！ overflow hidden 表示溢出隐藏。您必须重组您的 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;
  -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 .image-wrapper {
  overflow: hidden;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
}

.advantages-box .image {
  -webkit-transition: transform .3s;
  -moz-transition: transform .3s;
  -ms-transition: transform .3s;
  transition: transform .3s;
}

.advantages-box:hover .image {
  -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 p-0 position-relative image-wrapper">
            <div class="image h-100 w-100 " style="background-image: url(http://placekitten.com/1000/500); background-repeat: no-repeat; background-position: center center;">A</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>

Answer 3

可能是显而易见的 solution/workaround，但如果您必须保留 HTML 结构，并且其他解决方案中的 none 适合您，您可以考虑以下一项或多项缓解问题的策略：

增加项目的填充以允许更多 space 用于阴影
减小框阴影的大小使其适合且不会溢出
将带有阴影的绝对定位元素向左移动一点

根据您的情况，这可能会或可能不会缓解此问题。

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

How to set box shadow bottom when parent div is overflow hidden?

html

css

box-shadow