纯css实现九层不同颜色边框，无需修改html结构
本文演示如何仅使用CSS，为一个元素添加九层不同颜色的边框，且无需修改HTML结构。
挑战：
给定如下HTML代码：
立即学习“前端免费学习笔记（深入）”；
<code class="html"><div class="multiple-borders"> 这个是内容 </div></code>
目标：
- 不修改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>
代码解释：
-
box-shadow: 0 0 0 10px #123, ...;每个box-shadow设置四个值：水平偏移、垂直偏移、模糊半径、扩散半径和颜色。这里水平和垂直偏移都为0，模糊半径也为0，扩散半径则控制边框的宽度。颜色值则定义了每层边框的颜色。
通过这个方法，我们成功地用纯CSS创建了九层不同颜色的边框，并且没有修改任何HTML代码。 这种技术可以用于创建各种炫酷的视觉效果。
