关于前端: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);
}