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

Question

附件是我正在努力实现的目标。我正在尝试为两种背景颜色编写代码。一个将填充整个背景，另一个将在另一个内填充 60%，并带有投影。有人能帮我弄一下吗...谢谢！

enter image description here

Answer 1

一个例子：

你的 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>

Answer 2

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

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

我还留下了 JSFiddle 完整的例子。希望对您有所帮助:)

Answer 3

Paul，按照 Dadive 的解决方案，你会得到你想要的，它根本不需要任何 Flexbox。为了获得阴影效果，您需要添加的唯一代码是：

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

这将使您的黄色容器周围变得模糊，我假设您希望盒子阴影所在的位置。如果您正在考虑黄色容器中的内容，那么您可以通过将 .box3 设置为 .box3 { display: flex; } 来使它成为一个弹性容器。希望对您有所帮助。

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

how to write code for two background colors

css

background

background-color