html - Box-shadow与div的顶部/底部/左侧/底部周围的其他div重叠吗？

Question

我知道关于这个问题有很多问题和答案，但我想我不像我这样。什么都没做，我尝试了很多。

这是我的代码，下面有一个JSFiddle，请检查一下!

<style>
        #container {
            display: flex;
            flex-wrap: wrap;
            margin-top:100px;
            margin-bottom:100px;
        }
         .homeTiles {
           height:266px;width:100%;
           overflow:auto;
           background:yellow;
      }
        .image1 {
            box-shadow: -6px -6px 22px 6px grey;
    }
        .image2 {
            box-shadow: 6px 6px 22px 6px grey;
        }
        .image3 {
            box-shadow: -6px 6px 22px 6px grey;
        }
        .image4 {
            box-shadow: 6px 6px 22px 6px grey;
        }

        .homeTextTile1 {
            box-shadow: 6px -6px 22px 6px grey;
        }
        .homeTextTile2 {
            box-shadow: -6px 6px 22px 6px grey;
        }
        .homeTextTile3 {
            box-shadow: 6px 6px 22px 6px grey;
        }
        .homeTextTile4 {
            box-shadow: -6px 6px 22px 6px grey;
        }
</style>

<div id='container'>
<div class="col-md-6 homeTiles image1"></div>
     <div class="col-md-6 homeTiles homeTextTile1">
     </div>
     <div class="col-md-6 homeTiles homeTextTile2">
</div>
         <div class="col-md-6 homeTiles image2"></div>
         <div class="col-md-6 homeTiles image3"></div>
             <div class="col-md-6 homeTiles homeTextTile3">
            </div>
             <div class="col-md-6 homeTiles homeTextTile4">
         </div>
                 <div class="col-md-6 homeTiles image4"></div>
             </div>

我将 .homeTiles {width:100%;}更改为 .homeTiles {width:50%;}，因为JsFiddle输出的平方很小。现在您可以清楚地看到它对我的感觉。正如我所说，我不想在div的内部添加阴影(请参阅JsFiddle，然后您知道我的意思)。我只想要每个div外部的阴影(就像已经存在了，但我希望它减去div的内部阴影)。

https://jsfiddle.net/rhpskcu3/

谢谢!

Answer 1

现在，如果我了解您要执行的操作...

您的HTML应该如下所示:

<div id='container'>
    <div class="col-md-6 homeTiles image1"></div>
    <div class="col-md-6 homeTiles homeTextTile1"></div>
    <div class="col-md-6 homeTiles homeTextTile2"></div>
    <div class="col-md-6 homeTiles image2"></div>
    <div class="col-md-6 homeTiles image3"></div>
    <div class="col-md-6 homeTiles homeTextTile3"></div>
    <div class="col-md-6 homeTiles homeTextTile4"></div>
    <div class="col-md-6 homeTiles image4"></div>
</div>

本质上，除了格式设置之外，我认为您的HTML没什么问题。

然后，您正在使用的CSS阴影框应如下所示:

#container {
     display: flex;
     flex-wrap: wrap;
     margin-top:100px;
     margin-bottom:100px;
}
 .homeTiles {
     height:266px;
    width:50%;
     overflow:auto;
     background:yellow;
}
 .image1 {
     box-shadow: 0 0 grey;
}
 .image2 {
     box-shadow: 0 0 grey;
}
 .image3 {
     box-shadow: 0 0 grey;
}
 .image4 {
     box-shadow: 0 0 grey;
}
 .homeTextTile1 {
     box-shadow: 0 0 grey;
}
 .homeTextTile2 {
     box-shadow: 0 0 grey;
}
 .homeTextTile3 {
     box-shadow: 0 0 grey;
}
 .homeTextTile4 {
     box-shadow: 0 0 grey;
}

现在，您应该在这里做的是查看每个框，并根据长度确定要阴影如何出现。

CSS中的 box-shadow属性具有“x”和“y”值语法。如您所见 here。但是，您可以通过添加另外两组数字来增加阴影和模糊属性的大小。

事情就这样了: box-shadow: x-value y-value blur-radius spread-radius shadow-color; box-shadow: 6px 10px 12px 15px grey
因此，如果我查看代码的方式正确，则CSS应该是:

#container {
  display: flex;
  flex-wrap: wrap;
  margin-top: 100px;
  margin-bottom: 100px;
}

.homeTiles {
  height: 266px;
  width: 50%;
  overflow: auto;
  background: yellow;
}

.image1 {
  box-shadow: -6px -10px grey;
}

.image2 {
  box-shadow: 6px 0 grey;

}

.image3 {
  box-shadow: -6px 0 grey;
}

.image4 {
  box-shadow: 6px 10px grey;
}

.homeTextTile1 {
  box-shadow: 6px -10px grey;
}

.homeTextTile2 {
  box-shadow: -6px 0 grey;
}

.homeTextTile3 {
  box-shadow: 6px 0 grey;
}

.homeTextTile4 {
  box-shadow: -6px 10px grey;
}

但是，如果您希望所有阴影相交并且不重叠在每个框上，则最好将阴影分配给父对象。如下所示:

.container {
  box-shadow: -6px 10px grey;
  display: flex;
  flex-wrap: wrap;
  margin-top: 100px;
  margin-bottom: 100px;
}

.homeTiles {
  height: 266px;
  width: 50%;
  overflow: auto;
  background: yellow;
}

您只需要继续进行调整，直到获得所需的内容。但是，您可以使用诸如 this one之类的在线工具来帮助您。