我想在文字下面加一条虚线:
网页设计师设计了一个自定义点缀,因此我无法使用:
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;
}
效果非常好但是根据文字的宽度,最后一个点可能会像你在这张照片上看到的那样显得切割:
您对如何避免这种情况有什么建议吗?
答案 0 :(得分:6)
尽可能重复图像而不剪裁。首先 最后的图像固定在元素的两侧,并且 空白在图像之间均匀分布。该 除非只有一个图像,否则将忽略background-position属性 显示没有剪辑。剪辑发生的唯一情况 空间是指没有足够的空间来显示一个图像。
答案 1 :(得分:1)
您可以使用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>
&#13;
Codepen here