几个跨度共享相同的边框和框阴影

Question

我尝试编写类似的内容，但似乎无法弄清楚如何为不同的文本行创建相同的边框和阴影。

<span>Some title will be here</span>

这是一个动态内容标题，因此它可能是两行或三行文本。我正在寻找任何解决方案，包括使用canvas或svg，但文本仍应可编辑。

谢谢！

Answer 1

我不知道如何在不指定唯一ID或类的情况下使用静态跨度来创建此类效果。所以这是一个可能的解决方案，希望有所帮助：

＆＃13;

＆＃13;

span {
    display: block;
    background-color: #FFFFFF;
    transform: translate(4px, -4px);
    border: 1px solid #000000;
    position: relative;
    z-index: 3;
}

.first {
    border-bottom: none;
}

.second {
    z-index: 2;
}

.last {
    border-top: 1px solid #FFFFFF;
}

div {
    display: inline-block;
    background-color: #000000;
    clear: both;
    float: left;
    margin-top: -1px;
}

＆＃13;

<div><span class="first">SOME</span></div>
<div><span class="second">TITLE WILL</span></div>
<div><span class="last">BE HERE</span></div>

＆＃13;

＆＃13;

＆＃13;

编辑：

这里的方法只是一个技巧而且相当简单，通过将较高的z-index应用于较短的元素并使用margin向上或向下移动来覆盖较长的元素。这只有在您事先知道每个跨度的宽度时才有效。但是，如果跨度是动态生成的，则必须使用其他方法（如php或javascript）来获取宽度并相应地应用css。