业务场景需要一个边框组件 三角边框和一个角为圆弧的组件谷歌了一番 最多的是 四个角为直角 但是业务需求是三个角为直角和一个角为弧形 其余的时候为四个角直角最终实现: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地址点击