這里涉及到了圓角和漸變色兩個屬性。
1.圓角：border-radius
border-radius 屬性是一個簡寫屬性，用於設置四個 border-*-radius 屬性。
2.漸變：linear-gradient
linear-gradient() 函數用於創建一個線性漸變的 "圖像"。
為了創建一個線性漸變，你需要設置一個起始點和一個方向（指定為一個角度）的漸變效果。你還要定義終止色。終止色就是你想讓Gecko去平滑的過渡，並且你必須指定至少兩種，當然也會可以指定更多的顏色去創建更復雜的漸變效果。
所以通常情況下認為的最簡便的方法是：直接在具有圓角邊框的屬性下使用border-image來控制漸變，但這樣是錯誤的。
有過經驗的朋友會發現border-radius會出現屬性失效的情況，因為兩個屬性看似是控制兩個效果，但實際操作卻都是操作了border邊角。
所以目前大眾化且普遍的做法如下：
采用遮罩顯示的方式，漸變為底色背景，內層填充，未被遮擋的部分自然就顯示為圓角邊框。
具體操作方式有多種如：
（1）兩個div控制，一個漸變背景板一個內層填充
（2）一個div通過after偽類元素添加漸變背景板
（3）利用div的盒模型屬性content-box, padding-box使用漸變和填充
以上三個方法均可實現圓角漸變邊框，目前的普遍做法也是如此。
但是以上方式有個致命的缺點，由於都是背景填充和遮罩，所以無法做到圓角漸變邊框且背景透明。
想要實現圓角漸變邊框且背景透明，純css實現比較困難，博主沒寫出效果極佳的列子不做代碼展示。
希望以上觀點對閱讀者有部分幫助，有純css實現圓角漸變邊框且背景透明的例子我會第一時間補全。