如何使用div创建相互嵌套的彩色矩形框（附示例需求图）

嘿，这事儿其实挺简单的！核心思路就是利用div的嵌套结构，再配合CSS的背景色和内边距（padding）来实现每层不同的颜色效果——内层div和外层div之间的空隙会显示外层的背景色，这样就形成了嵌套的彩色边框感。

先给你看一个能实现类似效果的完整代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>嵌套彩色矩形</title>
    <style>
        /* 最外层容器 */
        .outer-box {
            width: 400px;
            height: 400px;
            background-color: #ff4444; /* 红色外层 */
            padding: 20px; /* 留出内层空间，显示红色背景 */
            margin: 20px auto; /* 让整体居中显示 */
        }

        /* 中间层容器 */
        .middle-box {
            width: 100%;
            height: 100%;
            background-color: #ffff44; /* 黄色中间层 */
            padding: 20px; /* 留出内层空间，显示黄色背景 */
        }

        /* 最内层容器 */
        .inner-box {
            width: 100%;
            height: 100%;
            background-color: #44ff44; /* 绿色内层 */
        }
    </style>
</head>
<body>
    <div class="outer-box">
        <div class="middle-box">
            <div class="inner-box"></div>
        </div>
    </div>
</body>
</html>

关键知识点解释： #

• div嵌套结构：外层div包裹中间层，中间层再包裹内层，形成清晰的层级关系。
• padding属性：这是实现“彩色边框”的核心——给外层div设置padding后，内层div不会填满整个外层，外层的背景色就会在padding的区域显示出来，看起来像彩色边框。
• 自适应宽高：内层div设置width: 100%; height: 100%;，会自动适应外层减去padding后的空间，不用手动计算具体数值。
• 自定义调整：你可以根据需要修改每个div的background-color（颜色值）、padding（空隙大小）、width/height（整体尺寸），完全匹配你想要的效果。

如果想要更多层级的嵌套，只需要按照同样的逻辑继续添加div层，给每个新层设置不同的背景色和padding就可以啦！

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