Question

所以这就是我所在的地方：https://codepen.io/YellaChevy/pen/odYxrg

请原谅我的标记我是超级新手，我想弄清楚如何将一个整体的box-shadow属性添加到“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

您必须将每个项目的图像部分和文本包装到单独的ReadJson中，以获得您要查找的结果。试试这段代码。

div

如何在包含div中添加box-shadow？

2 个答案: