// 文字下划波浪线
.text{
text-decoration-line:underline;
text-decoration-style: wavy;
}
// 下边框波浪线
div {
background: radial-gradient(circle at 10px -7px, transparent 8px, currentColor 8px, currentColor 9px, transparent 9px) repeat-x,
radial-gradient(circle at 10px 27px, transparent 8px, currentColor 8px, currentColor 9px, transparent 9px) repeat-x;
background-size: 20px 20px;background-position: -10px calc(100% + 16px), 0 calc(100% - 4px);
}
// 表单,lable标签,左右对齐
// css
ul li{
width: 80px;
list-style: none;
text-align: justify;
text-align-last: justify;
}
p{
width: 580px;
text-align: justify;
text-align-last: right;
}
// html
<ul>
<li>姓名</li>
<li>联系方式</li>
<li>email(邮件)</li>
</ul>
<p>
语法:text-align-last: auto|left|right|center|justify|start|end|initial|inherit;
text-align-last 属性规定如何对齐文本的最后一行。
注意:text-align-last 属性只有在 text-align 属性设置为 "justify" 时才起作用。
</p>
text_align.png
注意:li 这个标签要设置 list-style: none; 去掉默认属性,否则在IE浏览器中当只有一行的时候,会出现并没有左右两端对齐,而是类似右对齐的bug。。。
网友评论