标签内的文本嵌套圆角边框图形？

【问题标题】：Nested rounded border graphic over text within tags? 标签内的文本嵌套圆角边框图形？
【发布时间】：2015-04-09 04:37:47
【问题描述】：

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

例如在html源代码中

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

看起来像这样：

理想情况下，它可以以图形方式处理 20 个嵌套级别。与使用 div 或其他东西相比，它与 span 标签一起使用很重要。

【问题讨论】：

标签： html css styling

【解决方案1】：

你可以这样做

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;
}

&lt;span&gt;She &lt;span&gt;loves&lt;/span&gt; him a &lt;span&gt;lot&lt;/span&gt;.&lt;/span&gt;

【讨论】：

@Gallaxhar 如果您认为这是正确的，欢迎您接受答案