标题文字的渐变色

效果：

代码

<divclass="ai-title"><span>导读</span></div><style>.ai-title{font-size:16px;width:80px;height:28px;font-weight:bold;margin-bottom:10px;border-radius:90px;background:linear-gradient(318deg,#CFF0FE 0%,#EAF8FE 33%,#B4DBFB 100%);border:1px solid #40B4F9;display:flex;align-items:center;justify-content:center;span{background:linear-gradient(252deg,#239DF4 2%,#5D37D9 79%,#9350F9 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;}}</style>

.ai-title

• 适当增加了 width: 80px 和 height: 28px ，以适配文字内容。
• 设置了 display: flex 、 align-items: center 和 justify-content: center ，确保文字在背景中居中。

span

• background : 设置渐变背景。
• -webkit-background-clip: text : 将背景裁剪到文字区域。
• -webkit-text-fill-color: transparent : 将文字颜色设为透明，从而透出背景的渐变色。