p, textarea {
--lineH: 1.6em;
line-height: var(--lineH);
padding:var(--lineH);
padding-block:0;/*reset to set first line right at top */
background:repeating-linear-gradient(to bottom, transparent 0 1.4em, gray 1.4em calc(1.4em + 2px), transparent calc(1.4em + 2px) 1.6em) 50% 0 / calc(100% - var(--lineH) * 2 ) 100% no-repeat ;
}
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
<textarea placeholder="Type your texts here"></textarea>
在示例中添加了一个文本区域,以展示另一种可能的用法。
如果需要,可以使用以下资源:
https://developer.mozilla.org/en-US/docs/web/css/gradient/repeating-linear-gradient
https://developer.mozilla.org/en-US/docs/Web/CSS/var
https://developer.mozilla.org/en-US/docs/Web/CSS/background
https://css-tricks.com/a-complete-guide-to-calc-in-css/
您可以使用更多的渐变效果来模拟整张乐谱 https://codepen.io/gc-nomade/pen/bGLGNWB
repeating-linear-gradient(transparent 0 calc(1.6em - 2px), gray 0 1.6em)
。 - Temani Afifp {
font-size: 14px;
font-weight: 400;
line-height: 32px;
text-decoration: underline;
text-underline-offset: 4px;
}
<h2>Hello world<h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sed mauris a metus ultricies sagittis commodo sed tellus. Cras sodales nunc ut neque feugiat dignissim. Nullam ligula mauris, blandit eu dignissim at, rutrum vitae nisi. Proin facilisis massa vel elit fermentum, sit amet aliquam quam hendrerit. Aenean interdum nisi a metus consequat, vitae viverra ligula scelerisque. Sed in erat dictum, dapibus arcu quis, interdum orci. Suspendisse sit amet gravida purus, eu facilisis felis. Aliquam consectetur dapibus augue a suscipit. In semper pretium erat. Duis eget sollicitudin arcu, volutpat scelerisque est. Proin nisl nisi, tincidunt a justo id, lobortis tempor lacus. Quisque eu tincidunt ex.</p>
p标签是块级元素。这意味着如果你为其指定边框,边框将被分配给该块。如果你将p标签更改为内联元素,则边框将按照你想要的方式显示。
带有下划线的内部单词
p {
display: inline;
border-bottom: 1px solid grey;
}
p span {
text-decoration: underline;
color: red;
}
<h2>Hello world<h2>
<p>Lorem ipsum dolor sit amet, <span>consectetur adipiscing</span> elit. Duis sed mauris a metus ultricies sagittis commodo sed tellus. Cras sodales nunc ut neque feugiat dignissim. Nullam ligula mauris, blandit eu dignissim at, rutrum vitae nisi. Proin facilisis massa vel elit fermentum, sit amet aliquam quam hendrerit. Aenean interdum nisi a metus consequat, vitae viverra ligula scelerisque. Sed in erat dictum, dapibus arcu quis, interdum orci. Suspendisse sit amet gravida purus, eu facilisis felis. Aliquam consectetur dapibus augue a suscipit. In semper pretium erat. Duis eget sollicitudin arcu, volutpat scelerisque est. Proin nisl nisi, tincidunt a justo id, lobortis tempor lacus. Quisque eu tincidunt ex.</p>
p {
display: inline;
border-bottom: 1px solid grey;
}
<h2>Hello world<h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sed mauris a metus ultricies sagittis commodo sed tellus. Cras sodales nunc ut neque feugiat dignissim. Nullam ligula mauris, blandit eu dignissim at, rutrum vitae nisi. Proin facilisis massa vel elit fermentum, sit amet aliquam quam hendrerit. Aenean interdum nisi a metus consequat, vitae viverra ligula scelerisque. Sed in erat dictum, dapibus arcu quis, interdum orci. Suspendisse sit amet gravida purus, eu facilisis felis. Aliquam consectetur dapibus augue a suscipit. In semper pretium erat. Duis eget sollicitudin arcu, volutpat scelerisque est. Proin nisl nisi, tincidunt a justo id, lobortis tempor lacus. Quisque eu tincidunt ex.</p>
试试这个:
text-decoration: underline;
text-underline-offset:6px;
https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_text-decoration-line