标题文本宽度与CSS中的块相同

Question

我有这个块：

例如：我添加文字：世界上最后的新闻。

我希望块的宽度与文本一样宽，但角落仍应保持曲线。

CSS：

.cat-box-title h2 {
    background: transparent url(.../images/testtitle.png) repeat-y;
    padding-left: 5px;
    color:#5E5E5E;
    float:left;
    margin-right:10px;
    font-size: 22px;
    font-family: BebasNeueRegular, arial, Georgia, serif;
}

HTML：

<div class="cat-box-title">
    title
</div>

Answer 1

如果您使用border-radius而不是背景图片，那么您的解决方案将更加轻松。

.round-btn
{
  background:#4679bd;
  color: #FFF;
  border-radius:5px;
  padding : 10px;
  border:none;
}

当然，您需要检查浏览器兼容性，无论您的浏览器是否支持此属性。如果没有，那么你需要使用一些黑客。

JsFiddle Demo

如果你使用背景图像解决方案，那么你需要使用两个图像;一个用于左侧边框半径，另一个用于右侧，并使用background-color用于按钮的其余部分。

Answer 2

CSS：

.cat-box-title {
             background-color: #4679bd; 
             color:#5E5E5E;
             float:left;
             border-radius:5px;
             margin-right:10px;
             font-size: 22px;
             padding: 5px;
             font-family: BebasNeueRegular,arial,Georgia, serif;
    }