1

当我将边框图像与填充一起使用时，它不会作为完整图像填充，而是单独填充，并且由于填充上的纹理，它看起来很糟糕。我能做些什么？

    <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/

在此处输入图像描述

4

1 回答 1

1

我必须同意 Jefferson 的观点，即你的形象不是一个理想的选择。因此，您的问题的确切答案是“获得不同的图像！” 如需进一步阅读，我建议查阅 Chris 的文章：http ://css-tricks.com/understanding-border-image/

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

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

于 2013-03-07T16:26:32.983 回答