如何为单个div设置3个宽度、颜色、border-radius不同的内边框，是否需要嵌套3个div？

给你提供两种可落地的实现方案，你可以根据业务兼容需求选择：

方案1：单div实现（优先推荐） #

仅用1个DOM节点即可实现效果，DOM结构无冗余，兼容IE9及以上主流浏览器。
实现原理：用border实现最外层绿色边框，inset内阴影实现中间白色边框，配合background-clip和padding实现内层黑色内容区，完全匹配你需要的不同边框宽度、圆角参数。

代码示例 #

* {
  box-sizing: border-box;
}
.multi-border {
  width: 400px;
  height: 300px;
  /* 外层绿色边框：宽度20px 圆角20px */
  border: 20px solid green;
  border-radius: 20px;
  /* 中间白色边框：宽度15px 圆角10px */
  box-shadow: inset 0 0 0 15px white;
  /* 内层黑色内容区 */
  padding: 15px;
  background: black;
  background-clip: content-box;
  border-radius: 10px;
  /* 内容居中样式 */
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
}

<div class="multi-border">
  <span>Growth</span>
</div>

方案2：三层div实现（兼容最优） #

就是你现在在用的写法，逻辑直观，无需考虑CSS新特性兼容，适合需要兼容IE8及更低版本浏览器的场景，缺点是存在多余的DOM嵌套节点。

方案选型建议 #

如果你的业务不需要兼容IE8及以下的古董浏览器，直接选单div方案即可，是当前场景下的最优解。

内容的提问来源于stack exchange，提问作者yavgz