网页设计师设计了一个自定义点缀,所以我不能使用:
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也很有用
总结以上是内存溢出为你收集整理的html – 在CSS中使用background-image创建一个完美的虚线全部内容,希望文章能够帮你解决html – 在CSS中使用background-image创建一个完美的虚线所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)