写一个border.scss通用样式文件/*border1px*/@mixinborder1px($borderStyle:solid,$borderColor:#EEEEEE,$borderRadius:0,$position:bottom){position:relative;&:之后{内容:'';位置:绝对;顶部:0;左:0;宽度:200%;高度:200%;框大小:边框框;变换:比例(0.5);变换原点:左上;边界半径:$borderRadius;-webkit-转换:规模(0.5);变换:比例(0.5);-webkit-transform-origin:00;变换原点:00;指针事件:无;//解决内部元素无法点击问题@if($position==top){border-top:1px$borderStyle$borderColor;}@if($position==bottom){border-bottom:1px$borderStyle$borderColor;}@if($position==left){border-left:1px$borderStyle$borderColor;}@if($position==right){border-right:1px$borderStyle$borderColor;}@if($position==all){border:1px$borderStyle$borderColor;}}}其他scssfile@import'./../../assets/styles/border';//bottomborder.itemWrap{float:left;宽度:100%;高度:60px;@includeborder1px(solid,#EEEEEE,0,bottom);}//顶部border.itemWrap{float:left;宽度:100%;高度:60px;@includeborder1px(solid,#EEEEEE,0,top);}//bottomborder.itemWrap{float:left;宽度:100%;高度:60px;@includeborder1px(solid,#EEEEEE,0,bottom);}//左border.itemWrap{float:left;宽度:100%;高度:60px;@includeborder1px(solid,#EEEEEE,0,left);}//rightborder.itemWrap{float:left;宽度:100%;高度:60px;@includeborder1px(solid,#EEEEEE,0,right);}//完整的边框。itemWrap{浮动:左;宽度:100%;高度:60px;@includeborder1px(solid,#EEEEEE,0,全部);}//全边框+圆角,单边框时第三个参数为0itemWrap{float:left;宽度:100%;高度:60px;@includeborder1px(solid,#EEEEEE,60px,all);}表现:
