css水平垂直分割线美化
2年前
超过1013天
温馨提示
本文最后更新于2022年02月12日，已超过1013天没有更新，若内容或图片失效，请留言反馈。
html代码
<!-- 分割线 -->
<div class="sv-divider sv-divider--horizontal">
<div class="sv-divider__text is-center">周董</div>
</div>
<div class="sv-divider sv-divider--horizontal">
<div class="sv-divider__text is-left">周董</div>
</div>
<div class="sv-divider sv-divider--horizontal">
<div class="sv-divider__text is-right">周董</div>
</div>
<div class="sv-divider sv-divider--horizontal">
<div class="sv-divider__text"></div>
</div>
<div>
<!-- 垂直分割线 -->
<span>菊花台</span>
<div class="sv-divider sv-divider--vertical">
</div> <span>东风破</span>
<div class="sv-divider sv-divider--vertical">
</div> <span>晴天</span>
</div>
css代码
transform:translateY(-50%);
}
.sv-divider__text.is-center {
left:50%;
transform:translateX(-50%) translateY(-50%);
}
.sv-divider__text {
position:absolute;
background-color:#fff;
padding:0 20px;
font-weight:500;
color:#303133;
font-size:14px;
}
.sv-divider--vertical {
display:inline-block;
width:1px;
height:1em;
margin:0 8px;
vertical-align:middle;
position:relative;
}
.sv-divider {
background-color:#dcdfe6;
position:relative;
}
0 赞
or 打赏
喜欢就打赏一点
