Question

真的很简单。我有一些使用border-image的按钮。他们使用的图像有大圆角，因此内容所在的内框总是被边框加载。我想做到这一点，按钮调整文本的宽度，但文本右边的边缘。基本上，需要消除文本边缘和边缘之间的巨大差距。

以下是我所得到的以及我想要改变的一个例子：

＆＃13;

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

＆＃13;

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

＆＃13;

因此即使在该示例中看起来很糟糕，我希望文本边缘能够触及边框图像边缘。我已经尝试过盒子大小调整：border-box;＆＃39;但这似乎只适用于正常的边界。

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>

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

1 个答案: