如何向包含 div 添加框阴影？

Question

所以这是我所在的位置：https://codepen.io/YellaChevy/pen/odYxrg

请原谅我的标记，我是超级新手，我想弄清楚的是如何将一个整体框阴影属性添加到 "dogBlock" 和 "infoBlock"？我觉得它与我的 html 结构有关，但不确定如何调整它以使其看起来像这样：https://www.pages.xyz/

我从 pages.xyz 网站上看到它们包含多个 div 但只有一个整体框阴影，这有意义吗？

提前致谢！

<section>
<div class="container">

    <div class="dogBlock">
        <a href="#"><img src="Assets/image_1.jpg"></a>
    </div>

    <div class="dogBlock">
        <a href="#"><img src="Assets/image_2.jpg"></a>
    </div>

    <div class="dogBlock">
        <a href="#"><img src="Assets/image_3.jpg"></a>
    </div>

</div>
<div class="container">

    <div class="infoBlock">
        <h2>Sharpe</h2>
        <p>Lorem ipsum dolor sit amet, sir dolor em.</p>
        <a href="#">Meet Sharpe</a>
    </div>

    <div class="infoBlock">
        <h2>Bonnie, Mya + Roo</h2>
        <p>Lorem ipsum dolor sit amet, sir dolor em.</p>
        <a href="#">Meet the sisters</a>
    </div>

    <div class="infoBlock">
        <h2>Willow</h2>
        <p>Lorem ipsum dolor sit amet, sir dolor em.</p>
        <a href="#">Meet Willow</a>
    </div>

</div>

 .container {
max-width: 1200px;
overflow: hidden;
margin: 0 auto;}

.boxShadow {
box-shadow: 0 10px 6px -6px rgba(255, 255, 255, 0.2);}


.dogBlock {
width:33.333%;
float: left;
margin-top: 80px;}

.infoBlock {
color:#000;
width:33.333%;
float:left;
background-color:rgba(236,236,236,1.00);
padding: 20px;
margin-bottom: 280px;}

Answer 1

这样添加

   .container{
     max-width: 1200px;
     overflow: hidden;
     margin: 0 auto;
     -webkit-box-shadow: 3px 3px 5px 6px #ccc;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
     -moz-box-shadow:    3px 3px 5px 6px #ccc;  /* Firefox 3.5 - 3.6 */
      box-shadow:         3px 3px 5px 6px #ccc;  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}

看看，是否有效。

Answer 2

您必须将每个项目的图像部分和文本包装成单独的 div 才能获得您要查找的结果。试试这个代码。

<section>
    <div class="container">
        <div clss="boxwrap">
        <div class="dogBlock">
            <a href="#"><img src="Assets/image_1.jpg"></a>
      <div class="infoBlock">
        <h2>Sharpe</h2>
        <p>Lorem ipsum dolor sit amet, sir dolor em.</p>
        <a href="#">Meet Sharpe</a>
      </div>
        </div>

        <div class="dogBlock">
            <a href="#"><img src="Assets/image_2.jpg"></a>
      <div class="infoBlock">
        <h2>Bonnie, Mya + Roo</h2>
        <p>Lorem ipsum dolor sit amet, sir dolor em.</p>
        <a href="#">Meet the sisters</a>
      </div>
        </div>

        <div class="dogBlock">
            <a href="#"><img src="Assets/image_3.jpg"></a>
      <div class="infoBlock">
        <h2>Willow</h2>
        <p>Lorem ipsum dolor sit amet, sir dolor em.</p>
        <a href="#">Meet Willow</a>
      </div>
        </div>
      <div class="clear"></div>
    </div>
    </div>
</section>

.container {
    max-width: 1200px;
    overflow: hidden;
    margin: 0 auto;
}
.boxwrap {
  margin-left: -15px;
  margin-right: -15px;
}


.dogBlock {
    width:calc(33.333% - 30px);
    float: left;
    margin-top: 80px;
  margin-left: 15px;
  margin-right: 15px;
  box-shadow: 0 5px 10px 1px rgba(0, 0, 0, 0.2);
  border-radius: 6px;
}

.infoBlock {
    color:#000;
    background-color:rgba(236,236,236,1.00);
    padding: 20px;
    margin-bottom: 280px;
}
.clear {
  clear: both;
}

如何向包含 div 添加框阴影？

How to add a box-shadow to a containing div?

html

css

styles

box-shadow