设置移动端1像素边框

最新推荐文章于 2023-02-17 20:30:22 发布

原创最新推荐文章于 2023-02-17 20:30:22 发布 · 600 阅读

1 ·

CC 4.0 BY-SA版权

基础知识专栏收录该内容

80 篇文章

订阅专栏

博客介绍了边框设置相关内容，包括设置下边框、上边框、左边框、右边框，以及四个方向和圆角边框的设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

设置下边框

.border_1px {
  position: relative;
}

.border_1px:before {
  content: '';
  position: absolute;
  bottom: 0;
  height: 1px;
  width: 100%;
  background-color: #000;
  transform-origin: 50% 0%;
}

@media only screen and (-webkit-min-device-pixel-ratio:2) {
  .border_1px:before {
    transform: scaleY(0.5);
  }
}

@media only screen and (-webkit-min-device-pixel-ratio:3) {
  .border_1px:before {
    transform: scaleY(0.33);
  }
}

设置上边框

.border_1px {
  position: relative;
}

.border_1px:before {
  content: '';
  position: absolute;
  top: 0;
  height: 1px;
  width: 100%;
  background-color: #000;
  transform-origin: 50% 0%;
}

@media only screen and (-webkit-min-device-pixel-ratio:2) {
  .border_1px:before {
    transform: scaleY(0.5);
  }
}

@media only screen and (-webkit-min-device-pixel-ratio:3) {
  .border_1px:before {
    transform: scaleY(0.33);
  }
}

设置左边框

.border_1px {
  position: relative;
}

.border_1px:before {
  content: '';
  position: absolute;
  left: 0;
  width: 1px;
  height: 100%;
  background-color: #000;
  transform-origin: 0% 50%;
}

@media only screen and (-webkit-min-device-pixel-ratio:2) {
  .border_1px:before {
    transform: scaleX(0.5);
  }
}

@media only screen and (-webkit-min-device-pixel-ratio:3) {
  .border_1px:before {
    transform: scaleX(0.33);
  }
}

设置右边框

.border_1px {
  position: relative;
}

.border_1px:before {
  content: '';
  position: absolute;
  right: 0;
  width: 1px;
  height: 100%;
  background-color: #000;
  transform-origin: 0% 50%;
}

@media only screen and (-webkit-min-device-pixel-ratio:2) {
  .border_1px:before {
    transform: scaleX(0.5);
  }
}

@media only screen and (-webkit-min-device-pixel-ratio:3) {
  .border_1px:before {
    transform: scaleX(0.33);
  }
}

设置四个方向和圆角边框

.border_1px {
  position: relative;
}

.border_1px:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  box-sizing: border-box;
  border: 1px solid #000;
  transform-origin: 0 0;
}

@media only screen and (-webkit-min-device-pixel-ratio:2) {
  .border_1px:before {
    width: 200%;
    height: 200%;
    border-radius: 10px;
    transform: scale(0.5);
  }
}

@media only screen and (-webkit-min-device-pixel-ratio:3) {
  .border_1px:before {
    width: 300%;
    height: 300%;
    border-radius: 15px;
    transform: scale(0.33);
  }
}
</style>