如何通过 css 为元素添加九层不同颜色的边框,而不修改 html 结构?
通常,添加边框可以通过 border 属性来实现。但本问题要求在不修改 html 结构的前提下,只通过 css 为 .multiple-borders 元素添加九层不同的边框。
为了实现这一效果,我们可以使用 css 中的 box-shadow 属性。该属性可以为元素添加阴影效果,而阴影效果可以模拟边框。
根据题意,九层边框由里而外的颜色分别为:
- #123
- #234
- #345
- #456
- #567
- #678
- #789
- #89a
- #9ab
接下来,我们一步步实现 css 代码:
立即学习“前端免费学习笔记(深入)”;
- 设置 .multiple-borders 元素的宽度、高度、背景颜色、文本对齐方式和外边距。
- 使用 box-shadow 属性逐层添加阴影,模拟九层边框效果。其中,阴影的长度、宽度和颜色分别对应边距、边框宽度和边框颜色。
最终的 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,
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;
}










