几个 span 共享相同的边框和 box-shadow答案

【问题标题】：Several span's sharing same border and box-shadow几个 span 共享相同的边框和 box-shadow
【发布时间】：2015-11-14 23:55:09
【问题描述】：

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

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

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

谢谢！

【问题讨论】：

您展示的示例是图像，我从未做过这种形状的 Div。但是这个边框和阴影可以给一个全文或者一个方形的Div元素，
是的，事情是我需要这种形状的 Div 或 Span 具有不同的线宽，周围有边框和所有块的阴影。从方形 div 块创建阴影和边框绝对没有问题，但这不是我的情况:)
你使用什么规则将文本分成多行？

标签： javascript html css canvas svg

【解决方案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 应用于较短的元素并使用边距将其向上或向下移动以覆盖较长的元素。这只有在您事先知道每个跨度的宽度时才有效。但是，如果 span 是动态生成的，则必须使用 php 或 javascript 等其他方法来获取宽度并相应地应用 css。

【讨论】：

这正是我想要实现的！非常感谢！
哎呀，当第一行并且该行比第二行长时，这不起作用:(这是一个示例i.stack.imgur.com/iZwy0.jpg
如果您事先知道每个跨度的宽度，您可以使用相同的概念来实现。但是，如果宽度未知，则必须检测宽度并相应地应用 css。你可以通过 php 或 javascript 来做到这一点。