只用css，如何为div元素创建九层边框？

本文将演示如何仅使用CSS，在不修改HTML结构的情况下，为一个div元素创建九层边框。

已知HTML代码如下：

<div class="multiple-borders">
  这个是内容
</div>

目标是通过CSS，为该div元素添加九层边框，效果如图所示。 九层边框颜色由内到外依次为：#123, #234, #345, #456, #567, #678, #789, #89A, #9AB。

立即学习“前端免费学习笔记（深入）”；

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

解决方案：

利用CSS的box-shadow属性可以轻松实现多层边框效果。 每个box-shadow定义一层边框，通过调整blur-radius为0，并控制offset-x、offset-y以及spread-radius来创建不同宽度的边框。

.multiple-borders {
    width: 200px;
    height: 200px;
    background-color: white; /* 设置背景颜色，使边框更清晰可见 */
    line-height: 200px; /*垂直居中对齐文本*/
    text-align: center; /*水平居中对齐文本*/
    margin: 90px; /* 添加外边距，便于观察效果 */
    box-shadow:
        0 0 0 10px #123,  /* 第一层边框 */
        0 0 0 20px #234,  /* 第二层边框 */
        0 0 0 30px #345,  /* 第三层边框 */
        0 0 0 40px #456,  /* 第四层边框 */
        0 0 0 50px #567,  /* 第五层边框 */
        0 0 0 60px #678,  /* 第六层边框 */
        0 0 0 70px #789,  /* 第七层边框 */
        0 0 0 80px #89A,  /* 第八层边框 */
        0 0 0 90px #9AB;  /* 第九层边框 */
}

这段CSS代码通过叠加九个box-shadow，分别设置了九层不同颜色的边框。 spread-radius参数控制边框的宽度，这里每层边框宽度为10px。 blur-radius设置为0，确保边框清晰锐利。

通过这种方法，我们成功地只使用CSS，就为div元素创建了九层边框，而无需修改HTML代码。