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

大胡子民工潘半仙
  • 4.8k

已知 HTML 代码如下:

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

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

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

  • #123
  • #234
  • #345
  • #456
  • #567
  • #678
  • #789
  • #89A
  • #9AB
回复
阅读 467
2 个回答

image.png

<!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>

只需要一个 box-shadow 就解决了

搜关键字 box-shadow 多重

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏