利用伪类和tranform实现1px 边框border

最新推荐文章于 2024-04-20 20:30:09 发布

ggxr00

最新推荐文章于 2024-04-20 20:30:09 发布

阅读量592

点赞数

分类专栏： css 文章标签： css html

本文链接：https://blog.youkuaiyun.com/ggxr00/article/details/84025609

版权

css 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种使用CSS创建清晰边框的技巧，通过绝对定位和伪元素实现响应式设计中边框的高清显示。文章详细解释了如何根据不同设备的像素比例调整边框的宽度，确保在高分辨率屏幕上也能保持边框的清晰度。

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

.border-1px{
    position: relative;
}
.border-1px:after{
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    border-top: 1px solid #ccc;
    content: ' ';
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5){
  .border-1px:after{
        -webkit-transform: scaleY(0.7);
        transform: scaleY(0.7);
    }
}
@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2){
  .border-1px:after{
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
    }
}