我想在文本下方加一条虚线:
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也很有用
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。