近期因應 UI 設計師要求，需要在按鈕的邊緣加上漸層色邊框。原先以為這並不會是太困難的事，想不到也花了一些時間才能順利實現。這邊筆記下重點和實作示範。
限制緣由
雖說可以透過 border-image 來實現漸層色，但是你無法在其加上 border-radius。W3C 的 Spec 中有提及如下：
A box’s backgrounds, but not its border-image, are clipped to the appropriate curve (as determined by ‘background-clip’).
實現方法
1. 透過外框的 div 設置 border-radius，padding 則是邊框的寬度
2. 內部的按鈕和外框的 border-radius 需相同、寬高度均設置 100%，以確保和父層的 div 一致
參考資料
1. CSS漸變色邊框，解決border設定漸變後，border-radius無效的問題
2. Possible to use border-radius together with a border-image which has a gradient?
