<span> </span>标记内的文本嵌套圆形边框图形？

Question

是否可以获得嵌套圆角矩形表示每个<span></span>分组的效果？

例如，在html源代码

中

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

看起来像这样：

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

Answer 1

你可以这样做

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;