边框图像填充很奇怪

Question

当我使用带填充的border-image时，它不是作为完整图像填充，而是单独填充，并且由于填充物上的纹理，它看起来很糟糕。我该怎么办？

    <td class="heading">
        This is a heading
    </td>

<style>
.heading {
padding:10px;
border-style: solid; 
border-width: 27px 51px 27px 27px; 
-moz-border-image: url('http://img24.imageshack.us/img24/4189/brownfill.png') 27 51 27 27 repeat; 
-webkit-border-image: url('http://img24.imageshack.us/img24/4189/brownfill.png') 27 51 27 27 repeat;
 -o-border-image: url('http://img24.imageshack.us/img24/4189/brownfill.png') 27 51 27 27 repeat; 
border-image: url('http://img24.imageshack.us/img24/4189/brownfill.png') 27 51 27 27 fill repeat;
}
</style>

jsFiddle这里：http://jsfiddle.net/zWygk/

Answer 1

我必须同意杰斐逊的观点，即你的形象不是理想的选择。你的问题的确切答案是“获得不同的形象！” 为了进一步阅读，我建议咨询Chris的文章：http://css-tricks.com/understanding-border-image/

简而言之：图像需要总共包含9个切片。 4个用于角落，4个用于实际边框/侧面，1个用于容器主体（可以是空白）

如果边框宽度超过切片的高度（顶部/底部边框）或宽度（左/右边框），您还应该知道切片会被拉伸。只能使用参数repeat / stretch

设置其他维度