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

Question

我正在尝试编写类似这样的代码 但似乎无法弄清楚如何为不同的文本行制作相同的边框和阴影。

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

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

谢谢!

Answer 1

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

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

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

编辑:

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