0

我正在尝试创建一个由图像组成的边框，每边一个，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; }

如果您需要基于图像的 broders，那么我会将您的所有图像合并到一个背景图像中，并为元素提供一些填充，以便您可以在边缘看到背景图像。

多个背景图像通常不会按预期工作，并且很难使用。

于 2013-05-01T13:05:26.153 回答