0

画像で構成される境界線を、側面ごとに 1 つ、角ごとに 4 つの異なる境界線を作成しようとしています。結果は期待どおりではありません。境界線の左右の辺が、上下の辺に重なっています。また、角は側面で覆われているので目立ちません。以下は私がこれまでに持っているコードです。

<div class="book-border" style="margin: 5%">
    <div class="book-top"
         style=" margin: 1%; background: url(style/border_br.png) bottom right no-repeat,
                    url(style/border_bl.png) bottom left no-repeat,
                    url(style/border_tr.png) top right no-repeat,
                    url(style/border_tl.png) 0 0 no-repeat,
                    url(style/border_right.png) top right repeat-y,
                    url(style/border_left.png) top left repeat-y,
                    url(style/border_bottom.png) bottom left repeat-x,
                    url(style/border_top.png) 0 0 repeat-x;">

        <h2>New Books</h2>
        //Some HTML code
    </div>          
</div>

コーナーが表示され、残りの部分と重ならない明確な境界線を実現するにはどうすればよいですか?

アップデート：

背景のスタイル設定を含む新しい CSS ファイルがありますが、希望どおりの結果が得られません。

<div class="book-category" id="newbooks">
        <h2>New Books</h2>

</div>

//CSS

 div.book-category{
        margin:10px;
        padding:10px;
        background: url("style/border_tl.png") 0 0 no-repeat,
        url("style/border_left.png") 0 0 repeat-y, 
        url("style/border_right.png") top right repeat-y,
        url("style/border_top.png") 0 0 repeat-x,
        url("style/border_bottom.png")  bottom left repeat-x;
    }

結果は

ここに画像の説明を入力

4

1 に答える 1

0

当たり前のことかもしれませんが、CSS ボーダーを使用できますか?

.book-top { border: 1px solid black; }

画像ベースのブロダーが必要な場合は、すべての画像を単一の背景画像に結合し、要素にパディングを与えて、背景画像が端に見えるようにします。

複数の背景画像は、通常、期待どおりに機能することはなく、使用するのが非常に困難です。

于 2013-05-01T13:05:26.153 に答える