用CSS簡單寫出漸層色的邊框與圓角(Gradient Border and Radius)
我們只要用很古老以前就存在的 border-image-source 和比較新的漸層語法 conic-gradient 互相結合就可以辦到。 簡單的漸層邊框範例 #example-card{ width: 200px; height: 200px; border: 20px solid hsl(80 100% 50%); border-image-slice: 1; border-image-source: conic-gradient( from 0deg, hsl(80 100% 50%), hsl(200 100% 60%), hsl(80 100% 50%) ); } EXAMPLE 因為 conic-gradient 的關係,這裡只要注意不要用在 IE 和舊 edge 就可以了。如果還是很擔心,其實用 linear-gradient 也可以。 邊框圓角 大家都知道,漸層屬性的CSS是寫在「xxx-image」底下(這裡是 border-image),而此屬性的 border-radius 會失效。因此,若要實現圓角就必須使用其它方法實現,這裡我們用擁有裁切功能的 clip-path。 clip-path: inset(0 round 24px); inset 的意思是內部裁切,0 是貼合主體,這樣就能簡單實現外邊框圓角。