實現如圖效果

利用背景圖屬性漸變色控制畫線顏色,通過背景圖大小屬性設定線條的粗細,文字盒子設定背景覆蓋部分線條
以下是實現程式碼

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