CSS——给 div 设置显示效果小于 1px 宽度的边框

最新推荐文章于 2024-06-18 22:31:17 发布

原创最新推荐文章于 2024-06-18 22:31:17 发布 · 1.7k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#伪元素边框

css 专栏收录该内容

22 篇文章

订阅专栏

本文介绍了一种在移动端实现的CSS细线边框效果，该效果在小屏幕设备上表现明显，而在PC端则差异不大。通过使用相对单位和伪元素，实现了响应式设计中的细节优化。

.box text {
  color: #2298fc;
  padding: 5rpx 10rpx;
}

.box text.borderB {
  position: relative;
}

.box text.borderB:after {
  display: block;
  content: '';
  position: absolute;
  top: 0;
  bottom: auto;
  left: 0;
  right: auto;
  -webkit-transform-origin: 0 0;
  -webkit-transform: scale(1);
  pointer-events: none;
  border: 1px solid #2298fc;
  border-radius: 5px;
}

@media screen and (-webkit-min-device-pixel-ratio:1.5) {
  .box text.borderB:after {
    right: -100%;
    bottom: -100%;
    -webkit-transform: scale(0.5);
  }
}

这个效果在移动端很明显，边框很细，PC端显示屏很大，可不计较这点粗细差别。