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

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>

所以，即使它看起来可怕在这个例子中，我想让文字边缘接触边缘图像边缘。 我试过'盒子大小：边框;'但这似乎只适用于正常的边界。

Answer 1

如果您放置在一个<span>的TEXT TEXT TEXT在HTML那么你可以放置它：

<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;向左由30px宽度左边框的三分之一移动<span>的左手边缘。
• 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>