类似渐变色弯曲border
因为
border-image和border-radius不能同时生效。所以使用双层背景实现。注：class属性使用了tailwindcss
- 实现效果
- 实现代码
<div
class="ml-6 flex h-14 items-center rounded-full border-2 border-transparent px-5"
style="
background:
linear-gradient(#fff, #fff) padding-box,
linear-gradient(#8362ff, #ff6b6e) border-box;
"
>
<span class="bg-gradient-to-r from-[#8362FF] to-[#FF6B6E] bg-clip-text text-lg font-bold whitespace-nowrap text-transparent"> 发起新对话 </span>
</div>
