如何在不修改 HTML 结构的前提下，只通过 CSS 让一个元素具有九层不同的边框？

已知 HTML 代码如下：

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

要求不允许修改 HTML 结构以及内容，不允许使用 JavaScript，仅通过 CSS 为该元素添加九层边框，效果图如下：

九层边框由里而外的颜色分别为：

#123
#234
#345
#456
#567
#678
#789
#89A
#9AB

变态面试题前端 css css3 html

阅读 1.4k

2 个回答

IT小马

✓ 已被采纳

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style> 
.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;
}
</style>
</head>
<body>

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

</body>
</html>