带有边框图像和动态宽度的h1可能吗？

Question

我正在尝试使用h1动态创建此功能区效果：

我有这两张图片：

我的目标是将这些内容粘贴到h1标记的每一端，使用display: inline;属性添加动态宽度。有没有“正确的方法”来做到这一点并让它跨浏览器工作？

为了我的测试目的，色带末端高40px，宽18px。我不确定我将如何处理阴影，但如果你们能帮助我弄清楚如何使这个工作，我可以让它看起来不错。 （希望）

为了澄清目的，这是我到目前为止的（非工作）css：

h1 {
display: inline;
height: 40px;
background-image: url(images/ribbon/left.png), url(images/ribbon/right.png);
background-position: left, right;
padding: 0 18x;
background-color: #ECECEC;
}

上面的css导致#ECECEC颜色在色带末端后面渗出。有什么想法吗？

更新 如果它有帮助，这里是我当前的CSS带给我的屏幕截图。这有点耸人听闻，使结果更容易看到。我添加了红色背景而不是#ECECEC。

Answer 1

首先尝试

overflow: hidden

它也可能是浏览器问题： Border Radius = Background Bleed

编辑： 您是否考虑过不使用所有图像并仅使用纯css http://css-tricks.com/snippets/css/ribbon/

可能看起来不像你想要但是搞乱css会解决这个问题。