1px问题解决方案

157 阅读1分钟

time[2023-5-13] 知识积累

1px 问题解决方案

/* border-image  */
.border-image {
  border-image: url("border.png") 30;
  /* border-image-source: url("border.png");
  border-image-slice: 30;
  border-style: solid; */
}

/* border-half */
.border-half {
  position: relative;
  &::after {
    content: "";
    position: absolte;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: #ddd;
    transform: scaleY(0.5);
  }
}

/* box-shadow */
// elment-plus input的实现
.el-input__wrapper {
  box-shdow: 0 0 0 1px var(--el-input-border-color, var(--el-border-color)) inset;
  /* x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
}