在CSS中用background-image创建一条完美的虚线 [英] Create a perfect dashed line with background-image in CSS

问题描述

我希望在文本下面有一条虚线：

网页设计师设计了一个点缀的定制，所以我不能使用：

  h2 {
 border-bottom：4px虚线#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

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

I would like to have a dotted line below to a text :

The web designer have designed a custom dotted so i can’t use :

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

because it is not conform.

What i’ve done : I’ve made an image with a dot and position it with css :

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

It works very well but depending on the width of the text, the last dot could appear cut like you can see on this picture :

Do you have a suggestion on how to avoid this ?

解决方案

You can use 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

Also there is usefull online generator

这篇关于在CSS中用background-image创建一条完美的虚线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！