css背景渐变色: 标题两边渐变画线效果

实现如图效果

利用背景图属性渐变色控制画线颜色,通过背景图大小属性设置线条的粗细,文字盒子设置背景覆盖部分线条
以下是实现代码

1 html 内容

<template>
　　<div class="notice">
　　　　<span class="notice_content">
　　　　公告
　　　　</span>
　　</div>
</template>

 

2 css 内容

<style lang="scss">
.notice {
　　position: relative;
　　margin: 15px auto 15px;
　　width: 100px;
　　background-image: linear-gradient(90deg, #fff, #333 50%, #fff);
　　background-size: 100% 1px;
　　background-position: 50%;
　　background-repeat: no-repeat;
　　text-align: center;
　　> span {
　　　　font-size: 12px;
　　　　color: #333;
　　　　padding: 0 6px;
　　　　background-color: #fff;
　　}
}
</style>

　　

————————————————
原文链接：https://blog.csdn.net/weixin_44486632/article/details/108066852