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

私はあなたのイメージが理想的な選択ではないというジェファーソンに同意しなければなりません。したがって、あなたの質問に対する正確な答えは、「別の画像を取得する」です。さらに読むために、私はクリスの記事を参照することをお勧めします：http: //css-tricks.com/understanding-border-image/

つまり、画像は合計9つのスライスで構成されている必要があります。コーナー用に4つ、実際の境界/側面用に4つ、コンテナの本体用に1つ（空白にすることができます）

また、境界線の幅がスライスの高さ（上/下の境界線）または幅（左/右の境界線）を超えると、スライスが引き伸ばされることも知っておく必要があります。引数repeat/Stretchを使用して設定できるのは、他のディメンションのみです。

于 2013-03-07T16:26:32.983 に答える