【CSS】类似渐变色弯曲border

类似渐变色弯曲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>