用CSS创建带背景图片的完美虚线

Question

我希望在文本下方添加一条虚线：

网页设计师设计了一个自定义的点线样式，因此我无法使用“：”。

h2 {
    border-bottom: 4px dashed #fff;
    display:table;
} 

因为它不符合规范。 我所做的：我用一个点制作了一张图像，并用CSS定位它：

h2 {
    padding-bottom: 20px;
    display:table;
    background-image: url('../images/tiret.png');
    background-repeat: repeat-x;
    background-position: center bottom; 
}

它的功能非常好，但取决于文本的宽度，最后一个点可能会被裁剪，就像您在这张图片上看到的那样：

你有避免这个问题的建议吗？

- Sébastien Gicquel

---

告诉设计师，CSS 不是 Photoshop。 - connexo

Answer 1

你可以尝试使用 background-repeat:space。

该图像将尽可能地重复，而不会被裁剪。第一个和最后一个图像固定在元素的两侧，并且空白均匀分布在图像之间。除非只有一张图像可以显示而不被裁剪，否则background-position属性将被忽略。唯一使用space时会发生裁剪的情况是当没有足够的空间来显示一张图像时。

- ca8msm

---

我正在寻找background-repeat: space的定义。我注意到它在Firefox上可以工作，但在我的Safari上却不能。需要检查一下出了什么问题。 - Sébastien Gicquel

Answer 2

您可以使用border-image属性：

h1 {
  display: inline-block;
 border-style: solid;
border-width: 0px 0px 12px;
-moz-border-image: url(http://yurigor.com/wp-content/images/goldstar.png) 0 0 286 round;
-webkit-border-image: url(http://yurigor.com/wp-content/images/goldstar.png) 0 0 286 round;
-o-border-image: url(http://yurigor.com/wp-content/images/goldstar.png) 0 0 286 round;
border-image: url(http://yurigor.com/wp-content/images/goldstar.png) 0 0 286 round;
}

<h1>Hello world</h1>

在这里可以找到Codepen 链接

另外还有一个有用的 在线生成器

- Yuri Gor

---

我喜欢这个解决方案。运行得非常好。 - Sébastien Gicquel