如何编写两种背景颜色的代码

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

保罗，按照Dadive的解决方案，您将获得所需的一切，根本不需要任何Flexbox。为了获得阴影效果，您需要添加的唯一代码是：

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

这会让你在黄色容器周围模糊不清，这就是我想你想要盒子阴影的地方。如果您正在考虑黄色容器内的内容，则可以通过将.box3设置为.box3 { display: flex; }来使<div ng-show="Base" > <a data-toggle="collapse" data-parent="Base" ng-click="processData('key101')">Process Data</a> </div> 成为Flex容器。我希望这会有所帮助。