1 pixel border

Use gulp-less to compile less, gulp-postcss and postcss-px2rem to replace px, / no / means not to compile, the project uses flexible.js, the dpr of Android is unified to 1, and the conversion of 1px to rem in Android is to see missing.

1. If you are not particularly concerned about the pixels, you can achieve this like a rounded border: border: 1px solid red; / no / border-radius: 10px;

2. Gradients can be used to achieve

3. Pseudo class

// 移动1像素表现
.setTopLine(@c: #E6E6E6) {
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 1px;/*no*/
  border-top: 1px solid @c;/*no*/
  color: @c;
  transform-origin: 0 0;
  transform: scaleY(0.5);
}

.setBottomLine(@c: #E6E6E6) {
  content: " ";
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  height: 1px;/*no*/
  border-bottom: 1px solid @c;/*no*/
  color: @c;
  transform-origin: 0 100%;
  transform: scaleY(0.5);
}

.setLeftLine(@c: #E6E6E6) {
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;/*no*/
  bottom: 0;
  border-left: 1px solid @c;/*no*/
  color: @c;
  transform-origin: 0 0;
  transform: scaleX(0.5);
}

.setRightLine(@c: #E6E6E6) {
  content: " ";
  position: absolute;
  right: 0;
  top: 0;
  width: 1px;/*no*/
  bottom: 0;
  border-right: 1px solid @c;/*no*/
  color: @c;
  transform-origin: 100% 0;
  transform: scaleX(0.5);
}