Question

我有以下代码在'h1'标签上设置带点/点的底部边框。

完整的代码可以在moorparksdevon.uk

找到

h1 {
    padding: 0 0 7px 0;
    margin: 0 0 10px 0;
    display:table;
    background-image: linear-gradient(to right, black 33%, rgba(255,255,255,0) 0%);
    background-position: bottom;
    background-size: 3px 1px;
    background-repeat: repeat-x;
}

然而......我似乎没有一丝不苟的结果。我在这里错过了什么吗？

Safari Mac - 大量点工作（https://i.stack.imgur.com/MAHgm.jpg）

Firefox Mac - 一些点工作（https://i.stack.imgur.com/mzRTM.png）

Chrome Mac - 完全没有点（https://i.stack.imgur.com/5sYfL.jpg）

Answer 1

您可以使用CSS border-bottom设置虚线边框。

jsfiddle：https://jsfiddle.net/mmkctq59/

CSS h1发现/ dotter边框

1 个答案: