使图像边框宽度向内而不是向外？

Question

真的很简单的问题。我有一些使用边框图像的按钮。他们使用的图像有很大的圆角，所以内容所在的内框总是被大量的边框填充。 我想让按钮适应文本的宽度，但让文本直接到边缘。 基本上需要消除文本边缘和边框边缘之间的大间隙。

以下是我已有的以及我想要更改的示例：

Fiddle

.a {
  display: inline-block;
  border-style: solid;
  border-width: 30px 30px;
  border-image: url(http://qt-project.org/doc/qt-4.8/images/qml-borderimage-tiled.png) 30 30 fill round;
  box-sizing: border-box;
}

<div class="a">
  TEXT TEXT TEXT
</div>

因此，即使在该示例中看起来很糟糕，我也希望文本边缘接触边框图像边缘。 我试过'box-sizing:border-box;'但这似乎只适用于普通边框。

Answer 1

如果您将TEXT TEXT TEXT 放在HTML 中的<span> 中，那么您可以定位它：

<div class="a">
    <span>TEXT TEXT TEXT</span>
</div>

如果您随后添加以下 CSS，文本将从按钮的左边框到右边框：

.a span {
    display:inline-block;
    position:relative;
    left:-10px;
    margin-right:-20px;
}

left: 位置和margin-right: 都派生自按钮的现有border-width:。

基本上：

• left:-10px; 将<span> 的左边缘向左移动30px 左边框宽度的三分之一。
• margin-right:-20px; 将<span> 的右侧边缘向右移动右侧边界30px 宽度的三分之一，并补偿上述规则中声明的10px 向左移位。

.a {
  display: inline-block;
  border-style: solid;
  border-width: 30px 30px;
  border-image: url(http://qt-project.org/doc/qt-4.8/images/qml-borderimage-tiled.png) 30 30 fill round;
  box-sizing: border-box;
}


.a span {
    display:inline-block;
    position:relative;
    left:-10px;
    margin-right:-20px;
}

<div class="a">
    <span>TEXT TEXT TEXT</span>
</div>