Css 如何为两种背景色编写代码

这就是我想要达到的目标。我正在尝试为两种背景色编写代码。一个将填充整个背景，另一个将在另一个内部填充60%，并带有阴影。谁能帮我拿这个…谢谢

例如：

在CSS上：

.box1 { background-color: gray; }
.box2 { background-color: yellow; margin: 0 auto; padding: 10px; width: 60%; }
.box3 { border: 1px solid black; padding: 3px; }

在您的HTML上：

<div class="box1">
    <div class="box2">
        <div class="box3">Content here</div>
    </div>
</div>

---

一种方法是使用flexbox，这里有一个有用的指南

我还留下了一个完整的例子。

---

我希望它能有所帮助：

保罗，你将通过遵循Dadive的解决方案得到你想要的，它根本不需要任何Flexbox。为了获得阴影效果，您需要添加的唯一代码是：

.box2 { box-shadow: 0px 0px 15px #000; }

这将使您的黄色容器周围出现模糊，我假设您希望框阴影位于该位置。如果您考虑的是黄色容器中的内容，那么可以将.box3设置为.box3{display:flex；}，从而使其成为flex容器。我希望这有帮助