实现如图效果
利用背景图属性渐变色控制画线颜色,通过背景图大小属性设置线条的粗细,文字盒子设置背景覆盖部分线条
以下是实现代码
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>
