html – 在CSS中使用background-image创建一个完美的虚线

我想在文本下方加一条虚线：

网页设计师设计了一个自定义点缀,所以我不能使用：

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

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

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

解决方法

你可以使用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 here

online generator也很有用