less给table标签添加圆角边框

因为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);
}