border設置邊框四角，為什么別人截圖邊框是圓弧？

業務場景需要一個邊框組件 三角邊框和一個角為圓弧的組件谷歌了一番 最多的是 四個角為直角 但是業務需求是三個角為直角和一個角為弧形 其余的時候為四個角直角最終實現:3.經過N次修改改成的方案思路一開始看網絡上的 發現大部分都是用背景漸變完成的 不行 因為弧形的邊框背景漸變無法完成.開始使用偽類來解決問題 弧形用圖片解決 不行 因為項目是大屏一旦放到大屏上圖片弧形的就會出現像素模糊再加上切圖困難 放棄沒辦法 只能用 div 解決 弧形就用 border-radius 來解決問題具體解決只能用div做的話 一下子變得簡單起來了首先我們先做一個div邊框作為為外層的邊框在做四個作為角的邊框對著四個角用相對路徑進行定位需要less的calc()方法進行精確計算用props進行傳值用sloit作為內容插槽需要參數和參數作用arc: border-radius 邊框彎曲弧度 比如你是右下角彎曲就傳值 '0 0 20px 0'arcSrc： 共有 topLeft topRight bottomLeft bottomRight 這些參數 比如你是右下角彎曲就傳值 'bottomRight'colors： 顧名思義這是邊框顏色 因為 邊框和四個角的顏色不同所以就需要連個顏色 比如內邊框為#2d6c90 四角的邊框顏色為#153a4f 你應該傳值: ['#2d6c90','#153a4f']完成具體代碼可以點擊我的github地址 因為用的是css-model大家可以根據具體業務進行修改 難是不難 主要的是思路~~~github地址點擊