如何为dogBlock和infoBlock添加整体box-shadow？前端新手求助

嘿，我来帮你搞定这个问题！你猜的没错，核心问题确实在于HTML结构——现在dogBlock和infoBlock是两个独立的元素，单独给它们加阴影只会各自产生独立的阴影效果，没法形成你想要的“整体阴影”。

要实现类似参考网站的效果，我们只需要把这两个块包裹在一个父容器里，然后给这个父容器添加box-shadow就可以了，具体步骤如下：

1. 调整HTML结构 #

把dogBlock和infoBlock放到一个新的父容器中，比如给这个容器起个类名.card-wrapper：

<div class="card-wrapper">
  <section class="dogBlock">
    <!-- 你的dogBlock原有内容 -->
  </section>
  <section class="infoBlock">
    <!-- 你的infoBlock原有内容 -->
  </section>
</div>

2. 添加父容器的CSS样式 #

给这个父容器设置阴影，同时调整布局保持原来的显示效果，还要注意处理圆角和溢出问题：

.card-wrapper {
  /* 自定义阴影参数，可根据参考效果调整数值，比如模糊度、颜色深浅 */
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  /* 如果内部块有圆角，父容器设置相同圆角，避免内容溢出破坏阴影完整性 */
  border-radius: 8px;
  /* 保持两个块的横向排列，和你原有布局一致 */
  display: flex;
  /* 确保内部块的边角不会超出父容器范围 */
  overflow: hidden;
}

3. 移除内部块的独立阴影 #

如果之前给dogBlock或infoBlock加过单独的box-shadow，记得把它们去掉，避免和父容器的阴影冲突：

.dogBlock, .infoBlock {
  box-shadow: none;
}

这样调整之后，dogBlock和infoBlock就会被父容器的阴影完整包裹，呈现出你想要的“共用一个整体阴影”的效果啦～

内容的提问来源于stack exchange，提问作者Calum