如何仅用CSS为元素添加九层不同颜色的边框？-css教程-PHP中文网

如何仅用CSS为元素添加九层不同颜色的边框？

霞舞

发布： 2025-02-22 15:54:01

原创

1089人浏览过

纯css实现九层不同颜色边框，无需修改html结构

本文演示如何仅使用CSS，为一个元素添加九层不同颜色的边框，且无需修改HTML结构。

如何仅用CSS为元素添加九层不同颜色的边框？

挑战：

给定如下HTML代码：

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

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

登录后复制

目标：

Symanto Text Insights

基于心理语言学分析的数据分析和用户洞察

查看详情

不修改HTML结构和内容。
不使用JavaScript。
使用CSS创建九层边框。
边框颜色由内到外依次为：#123、#234、#345、#456、#567、#678、#789、#89A、#9AB。

解决方案：

利用CSS的box-shadow属性可以巧妙地实现多层边框效果。通过叠加多个box-shadow，每个box-shadow代表一层边框，并设置不同的颜色和模糊半径来创建视觉上的层次感。

以下CSS代码实现了目标效果：

<code class="css">.multiple-borders {
  width: 200px;
  height: 200px;
  background-color: white; /* 设置背景颜色，使边框更清晰可见 */
  line-height: 200px; /* 垂直居中对齐文本 */
  text-align: center; /* 水平居中对齐文本 */
  margin: 90px; /* 添加外边距，使边框更易于观察 */
  box-shadow:
    0 0 0 10px #123, /* 第1层边框 */
    0 0 0 20px #234, /* 第2层边框 */
    0 0 0 30px #345, /* 第3层边框 */
    0 0 0 40px #456, /* 第4层边框 */
    0 0 0 50px #567, /* 第5层边框 */
    0 0 0 60px #678, /* 第6层边框 */
    0 0 0 70px #789, /* 第7层边框 */
    0 0 0 80px #89A, /* 第8层边框 */
    0 0 0 90px #9AB; /* 第9层边框 */
}</code>

登录后复制

代码解释：