不同像素密度屏幕下实现1px边框或分割线

最新推荐文章于 2020-04-15 14:08:13 发布

原创最新推荐文章于 2020-04-15 14:08:13 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#布局 #前端

前端专栏收录该内容

16 篇文章

订阅专栏

本文介绍了一种使用CSS伪元素::after来创建1px宽度的圆形边框及水平分割线的方法，通过调整比例和位置实现视觉上的完美居中效果。

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

1px边框

//HTML
<div class="one"></div>

//CSS
.one {
  position: relative;
  width: 100px;
  height: 100px;
}
.one::after {
  content: '';
  position: absolute;

  width: 200%;/*2X*/
  width: 300%;/*3X*/


  height: 200%;/*2X*/
  height: 300%;/*3X*/

  border: 1px solid black;
  border-radius: 50%;

  transform: scale(.5);/*2X*/
  transform: scale(.333);/*3X*/

  top: 50%;/*2X*/
  top: 100%;/*3X*/

  left: 50%;/*2X*/
  left: 100%;/*3X*/
}

1px分割线

//HTML
<div class="line"></div>

//CSS
.line {
  position: relative;
  margin: 0 30px;
}
.line::after {
  content: '';
  position: absolute;
  background: black;

  width: 200%;/*2X*/
  width: 300%;/*3X*/

  height: 1px;
  top: 0;

  left: 50%;/*2X*/
  left: 100%;/*2X*/

  transform: scale(.5);/*2X*/
  transform: scale(.333);/*2X*/
}