html 段落首字线段为虚线,html – 段落两侧的对角线虚线图案

您可以对模式使用线性渐变,并使用

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;

}

SEARCH

MOST POPULAR