是否在标记中的文本上嵌套圆角边框图形？

Question

是否有可能获得嵌套圆角矩形表示每个分组的效果？

例如,在html sourcecode中

<span>She <span>loves</span> him a <span>lot</span>.</span>

看起来应该是这样的：

理想情况下，它可以以图形方式处理20个嵌套级别。使用span标记而不是使用div或其他东西是很重要的。

Answer 1

你能做到的

null

span{
    display:inline-block;
}

span:first-child{
    border:1px solid black;
    border-radius:15px;
    padding:10px;
}
span:last-child{
    border:1px solid black;
    border-radius:15px;
    padding:10px;
}

<span>She <span>loves</span> him a <span>lot</span>.</span>