使用延伸到边框的文本创建HTML元素

我正在尝试创建一个如下所示的HTML元素：-

基本上，是一个

或其他带有边框的元素，内部（可能是多行）文本位于div的中心，但延伸到边框区域

到目前为止，我唯一有效的方案是使用三个（！）div：一个用于边界，第二个作为容器用于第三个，以确保垂直居中是正确的

<div class="BORDER" style = "left: 190px; top: 50px;">
</div>

<div class = "WRAPPER" style = "left: 190px; top: 50px;">
  <div>TEST THREE</div>
</div>

测试三

这感觉很尴尬：有没有一种方法可以使用较少的元素来实现相同的外观

限制（澄清）

• 文本可以有一行或多行
• 边框将是一个图像，最终将通过

  边框图像

  机制进行拉伸

---

这里有带CSS的JSFIDLE和一些其他（失败的）尝试

如果您愿意使用CSS3阴影，那么您可以尝试以下方法：

小提琴：

div {
    width: 50px;
    height: 50px;
    text-align: center;
    border: 1px solid #ccc;
    -webkit-box-shadow: 0 0 0px 11px #ccc inset;
}

div {
    width: 50px;
    height: 50px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;

    background-image: url(http://placehold.it/11x11), url(http://placehold.it/11x11), url(http://placehold.it/11x11), url(http://placehold.it/11x11);
    background-position: left top, left bottom, top right, bottom right;
    background-repeat: repeat-x, repeat-y, repeat-y, repeat-x;
}

语法：

box shadow:x偏移y偏移模糊扩散#颜色插入

您可以尝试使用

blur

和

size

来根据您的要求进行调整

更新：

根据您关于需要使用边框图像的评论，这里尝试使用

背景图像

，而不是9格

边框图像

。我想，这能满足你使用图像的目的吗

更新的小提琴：

div {
    width: 50px;
    height: 50px;
    text-align: center;
    border: 1px solid #ccc;
    -webkit-box-shadow: 0 0 0px 11px #ccc inset;
}

div {
    width: 50px;
    height: 50px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;

    background-image: url(http://placehold.it/11x11), url(http://placehold.it/11x11), url(http://placehold.it/11x11), url(http://placehold.it/11x11);
    background-position: left top, left bottom, top right, bottom right;
    background-repeat: repeat-x, repeat-y, repeat-y, repeat-x;
}

---

我不确定它是否适合您的实际用例，但我可以用一个div实现您的显示：

HTML:

<div class=dystroy>TEST FOUR</div>

.dystroy {
  position: fixed;
  left: 50px; top: 50px;
  margin: 0px;
  padding: 16px;
  height : 48px;
  width : 50px;
  display : table-cell;
  vertical-align : middle;
  text-align : center;
  color:  #000000;
  font-size : 16px;
  font-family : Calibri;
}

.dystroy:after {
  position: relative; 
  display : table-cell;
  top: -48px; left:0px;
  border: solid;
  border-width: 16px 16px;
  border-color: #e0e0e0;
  height: 32px;
  width: 50px;
  content:" ";
  z-index:-1;
  font-size : 16px;
}

编辑：实际上这里没有真正的动态垂直居中，这需要一个额外的分区。

以下工作：

<div style="border: 9px solid #ccc; width: 40px;">
    <p style="margin: 0 -.5em;">Test text</p>
</div>

测试文本

---

然而，如果你溢出了你的边界，它不是严格意义上的边界，而是背景图像；也许还有另一种方式来看待你的布局？

+1不是一个完整的答案（缺少正确的定位），而是一个有趣的答案。谢谢，这很有趣。不幸的是，我需要一个css边框图像，而不是一个普通的边框。我已经把它从小提琴上去掉了，让它更清晰一点。请@dystroy:谢谢。抱歉误用了kbd。更新了。@Roddy:根据您对图像的要求，我已经更新了答案。但是，不是用边框图像，而是用背景图像。嗯，我学到了一些东西；-）但是，垂直居中是不对的。根据文本行的数量以奇数的方式显示边框。是的，但是当您在示例中硬编码高度时，不清楚您想要什么样的垂直居中。您看到可以调整值了吗？框的高度（和位置）是硬编码的，但是框内可能有一行、两行或三行文本。文本需要在框内垂直居中。谢谢。我认为这是最好的办法。一些小的调整，我在这里添加了第二个DIV：这看起来适合你吗？@Roddy这很漂亮：）@Roddy我同意这个问题，从技术上讲，我不想要边界。用背景图像来实现这一点似乎更有意义。如果不使用伪边框，高度和宽度会更加灵活。你说得对，只是我的

背景图像

必须使用

边框图像

支持的9格技术进行缩放。我看不出有什么简单的办法可以解决这个问题。