css - 带有图像的样式列表

Question

我希望在列表的顶部和底部设置带有图像的列表样式。我知道在 css3 中有 border-image属性，但是我需要一些在旧版浏览器中也能工作的东西。

列表如下所示:

<ul>
 <li> a </li>
 <li> b </li>
</ul>

我需要一个图像出现在所有列表项之前，另一个图像出现在所有列表项之后。

我知道我可以做这样的事情:

<div id="top-image"></div>
   <ul>
    <li> a </li>
    <li> b </li>
   </ul>
<div id="bottom-image"></div>

还有比这更好的选择吗？

Answer 1

可能您必须在 UL background 中定义底部图像，在第一个 LI 中定义顶部图像。像这样:

ul{
 background:url(bottom-image) no-repeat left bottom;
}

li{
 background:url(bottom-image) no-repeat 0 0;
}
li + li{
 background:none;
}

检查这个例子http://jsfiddle.net/CY5ck/