html – 段落两侧的对角线虚线图案

概述<div class="search"> <p>SEARCH</p></div> 我试图在图像中添加虚线横向填充.只在文本的两侧.有什么方法可以做到吗？ 您可以对模式使用线性渐变,并使用 Line before and after title over image中描述的技术将其放置在标题的每一侧. 它会是这样的： .search { margin: .7em auto; overf

<div >  <p>SEARCH</p></div>

我试图在图像中添加虚线横向填充.只在文本的两侧.有什么方法可以做到吗？

解决方法 您可以对模式使用线性渐变,并使用 Line before and after title over image中描述的技术将其放置在标题的每一侧.
它会是这样的：

.search {  margin: .7em auto;  overflow: hIDden;  padding-left:100px;}.search:before,.search:after {  content: "";  display: inline-block;  wIDth: 100%; height:0.8em;  margin: 0 .5em 0 -105%;  vertical-align: mIDdle;  background-image: linear-gradIEnt(-45deg,#E0E0E0 25%,transparent 25%,transparent 50%,#E0E0E0 50%,#E0E0E0 75%,transparent 75%,transparent);  background-size: 0.5em 0.5em;}.search:after {  margin: 0 -105% 0 .5em;}.search p {  display: inline-block;  vertical-align: mIDdle;}

<div >  <p>SEARCH</p></div><div >  <p>MOST POPulAR</p></div>

总结

以上是内存溢出为你收集整理的html – 段落两侧的对角线虚线图案全部内容，希望文章能够帮你解决html – 段落两侧的对角线虚线图案所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。