如何在末尾显示带有图像的虚线？

Question

我想在每个div之后显示一个带有图像的虚线。 每个div将用虚线在视觉上分开：[startOfLine] --------- [image] - [endOfLine]。

我怎样才能做到这一点？

Answer 1

如果没有看到您的代码，我只能给您一般答案。虚线可能是用CSS设置的div的底部边框，如下所示：

border-bottom-style: dotted;

或

border-bottom-style: dashed;

然后，图像是正常的img，它将相对于原始位置定位：

position:relative;
top:10px;
left:10px;

当然，您必须设置正确的像素数。

Answer 2

Tania对包含虚线边框的背景图片的回答可能是最简单的，可能是这样的：

#container {
    background: url("btn.gif") repeat-x 0 20px;
    height: 30px;
}

通过这种方式，您可以控制虚线相对于图像的位置。

CSS3的border-image属性尚未得到所有浏览器的完全支持，但值得关注（http://css-tricks.com/understanding-border-image）。