在 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; 
}

它工作得很好，但根据文本的宽度，最后一个点可能会像您在这张图片上看到的那样被剪切掉：

您对如何避免这种情况有什么建议吗？

Answer 1

你可以试试 background-repeat:space

The image is repeated as much as possible without clipping. The first and last images are pinned to either side of the element, and whitespace is distributed evenly between the images. The background-position property is ignored unless only one image can be displayed without clipping. The only case where clipping happens using space is when there isn't enough room to display one image.

Answer 2

您可以使用边框图像：

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 here

也有用online generator

在 CSS 中创建带有背景图像的完美虚线

Create a perfect dashed line with background-image in CSS

html

css

background-image