/* 解決 ios 1px 顯示略粗的問題 */
  .ui-border-t,
  .ui-border-r,
  .ui-border-b,
  .ui-border-l {
    position: relative;
  }
  /* 上邊框 */
  .ui-border-t:before {
    border-top: 1px solid #f1f1f1;
    content: "";
    display: block;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    transform-origin: left top;
    -webkit-transform-origin: left top;
  }
  @media screen and(-webkit-min-device-pixel-ratio:2) {
    .ui-border-t:before {
      transform: scaleY(0.5);
      -webkit-transform: scaleY(0.5);
    }
  }
  @media screen and(-webkit-min-device-pixel-ratio:3) {
    .ui-border-t:before {
      transform: scaleY(0.3333);
      -webkit-transform: scaleY(0.3333);
    }
  }
  /* 右邊框 */
  .ui-border-r:before {
    border-right: 1px solid #f1f1f1;
    content: "";
    display: block;
    /* width: 100%; */
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    transform-origin: right top;
    -webkit-transform-origin: right top;
  }
  @media screen and(-webkit-min-device-pixel-ratio:2) {
    .ui-border-r:before {
      transform: scaleX(0.5);
      -webkit-transform: scaleX(0.5);
    }
  }
  @media screen and(-webkit-min-device-pixel-ratio:3) {
    .ui-border-r:before {
      transform: scaleX(0.3333);
      -webkit-transform: scaleX(0.3333);
    }
  }
  /* 下邊框 */
  .ui-border-b:before {
    border-bottom: 1px solid #f1f1f1;
    content: "";
    display: block;
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    transform-origin: left bottom;
    -webkit-transform-origin: left bottom;
  }
  @media screen and(-webkit-min-device-pixel-ratio:2) {
    .ui-border-b:before {
      transform: scaleY(0.5);
      -webkit-transform: scaleY(0.5);
    }
  }
  @media screen and(-webkit-min-device-pixel-ratio:3) {
    .ui-border-b:before {
      transform: scaleY(0.3333);
      -webkit-transform: scaleY(0.3333);
    }
  }
  /* 左邊框 */
  .ui-border-l:before {
    border-right: 1px solid #f1f1f1;
    content: "";
    display: block;
    /* width: 100%; */
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    transform-origin: left top;
    -webkit-transform-origin: left top;
  }
  @media screen and(-webkit-min-device-pixel-ratio:2) {
    .ui-border-l:before {
      transform: scaleX(0.5);
      -webkit-transform: scaleX(0.5);
    }
  }
  @media screen and(-webkit-min-device-pixel-ratio:3) {
    .ui-border-l:before {
      transform: scaleX(0.3333);
      -webkit-transform: scaleX(0.3333);
    }
  }
  /* 四周邊框 */
  .ui-border {
    position: relative;
  }
  .ui-border:before {
    border: 1px solid #f1f1f1;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    transform-origin: top left;
    -webkit-transform-origin: top left;
  }
  @media screen and(-webkit-min-device-pixel-ratio:2) {
    .ui-border:before {
      transform: scale(0.5);
      -webkit-transform: scale(0.5);
    }
  }
  @media screen and(-webkit-min-device-pixel-ratio:3) {
    .ui-border:before {
      transform: scale(0.3333);
      -webkit-transform: scale(0.3333);
    }
  }