為什么別人截圖邊框是圓弧？

業(yè)務(wù)場(chǎng)景需要一個(gè)邊框組件 三角邊框和一個(gè)角為圓弧的組件谷歌了一番 最多的是 四個(gè)角為直角 但是業(yè)務(wù)需求是三個(gè)角為直角和一個(gè)角為弧形 其余的時(shí)候?yàn)樗膫€(gè)角直角最終實(shí)現(xiàn):3.經(jīng)過(guò)N次修改改成的方案思路一開始看網(wǎng)絡(luò)上的 發(fā)現(xiàn)大部分都是用背景漸變完成的 不行 因?yàn)榛⌒蔚倪吙虮尘皾u變無(wú)法完成.開始使用偽類來(lái)解決問(wèn)題 弧形用圖片解決 不行 因?yàn)轫?xiàng)目是大屏一旦放到大屏上圖片弧形的就會(huì)出現(xiàn)像素模糊再加上切圖困難 放棄沒(méi)辦法 只能用 div 解決 弧形就用 border-radius 來(lái)解決問(wèn)題具體解決只能用div做的話 一下子變得簡(jiǎn)單起來(lái)了首先我們先做一個(gè)div邊框作為為外層的邊框在做四個(gè)作為角的邊框?qū)χ膫€(gè)角用相對(duì)路徑進(jìn)行定位需要less的calc()方法進(jìn)行精確計(jì)算用props進(jìn)行傳值用sloit作為內(nèi)容插槽需要參數(shù)和參數(shù)作用arc: border-radius 邊框彎曲弧度 比如你是右下角彎曲就傳值 '0 0 20px 0'arcSrc： 共有 topLeft topRight bottomLeft bottomRight 這些參數(shù) 比如你是右下角彎曲就傳值 'bottomRight'colors： 顧名思義這是邊框顏色 因?yàn)?邊框和四個(gè)角的顏色不同所以就需要連個(gè)顏色 比如內(nèi)邊框?yàn)?2d6c90 四角的邊框顏色為#153a4f 你應(yīng)該傳值: ['#2d6c90','#153a4f']完成具體代碼可以點(diǎn)擊我的github地址 因?yàn)橛玫氖莄ss-model大家可以根據(jù)具體業(yè)務(wù)進(jìn)行修改 難是不難 主要的是思路~~~github地址點(diǎn)擊