因为table的圆角实现比较复杂，所以写成一个less函数记录一下
应用
@import (reference) './utils.less';table { // 给不同的顶点设置对立的圆角 .add-radius-for-table(@border: 1px solid #000; @allRadius: 6px); // 能够给不同的顶点设置不同的圆角 .add-radius-for-table(@border: 1px solid #000; @allRadius: 6px 7px 8px 9px);}
工具函数 utils.less
/** * @description: 设置表格table的圆角边框 * @param border: 表格的border款式：1px solid blue * @param allRadius: 表格的radius：5px 或 5px 10px 或 5px 10px 20px等 */.add-radius-for-table(@border, @allRadius) { .getFullStrFromNum(@allRadius); @leftTop: extract(@res, 1); @rightTop: extract(@res, 2); @rightBottom: extract(@res, 3); @leftBottom: extract(@res, 4); border-collapse: separate; border-spacing: 0px; tr { td, th { border: @border; border-top: none; border-left: none; &:first-child { border-left: @border; } } &:first-child { td, th { border-top: @border; &:first-child { border-top-left-radius: @leftTop; } &:last-child { border-top-right-radius: @rightTop; } } } &:last-child { td, th { &:first-child { border-bottom-left-radius: @leftBottom; } &:last-child { border-bottom-right-radius: @rightBottom; } } } }}/** * @description: 把 5px 10px 类型的数组参数补充到四位 5px 10px 5px 10px；为了不便前面对立取参 * @param all: 5px 或 5px 10px 或 5px 10px 20px等 */.getFullStrFromNum(@all) { ._getFullStrFromNum(@all) { @res: @all; } ._getFullStrFromNum(@all) when (length(@all) = 1) { @res: @all @all @all @all; } ._getFullStrFromNum(@all) when (length(@all) = 2) { @res: extract(@all, 1) extract(@all, 2) extract(@all, 1) extract(@all, 2); } ._getFullStrFromNum(@all) when (length(@all) = 3) { @res: extract(@all, 1) extract(@all, 2) extract(@all, 3) extract(@all, 2); } ._getFullStrFromNum(@all);}