具有邊框圖像和動態寬度的h1是否可能？

Question

我正在嘗試使用h1動態創建此功能區效果：

我有這兩個圖像：

我的目標是將這些標簽貼在我的h1標簽的每一端，使用display: inline; 屬性以添加動態寬度。 有沒有“正確的方法”可以做到這一點並使它在瀏覽器中正常工作？

就我的測試目的而言，功能區的末端高40像素，寬18像素。 我不確定該如何處理陰影，但是如果你們可以幫助我弄清楚如何使它起作用，我可以使其看起來不錯。 （希望）

為了澄清起見，這是我到目前為止擁有的（無效）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可以解決此問題。