css 温故而知新 1px的问题

最新推荐文章于 2024-07-21 19:59:57 发布

weixin_34416649

最新推荐文章于 2024-07-21 19:59:57 发布

阅读量62

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/CyLee/p/7137075.html

本文提供了两种解决CSS在高分辨率屏幕下出现像素模糊的方法。第一种是通过Sass混合使用绝对定位和transform缩放来实现清晰的边框效果；第二种则是根据不同设备像素比设置不同宽度的边框。

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

解决方法1：

//border 
@mixin border($pos, $color) {
    content: "";
    position: absolute;
    transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    @if $pos=='top'{
        #{$pos}: 0px;
        left: 0px;
        right: 0px;
        border-#{$pos}: 1px solid $color;
        transform: scaleY(.5);
        -webkit-transform: scaleY(.5);
    } @else if $pos=='bottom' {
         #{$pos}: 0px;
        left: 0px;
        right: 0px;
        border-#{$pos}: 1px solid $color;
        transform: scaleY(.5);
        -webkit-transform: scaleY(.5);
    } @else {
        top: 0px;
        bottom: 0px;
        #{$pos}: 0px;
        border-#{$pos}: 1px solid $color;
        transform: scaleX(.5);
        -webkit-transform: scaleX(.5);
    }
}

使用方式：

.div {
  position:relative;

  &:after {
    @include border("bottom", #d9d9d9)
    left: pxToRem(30px);  /* 美化，不喜欢可以不加 */
  }
}

解决方式2：

.border { border: 1px solid #999 }
@media screen and (-webkit-min-device-pixel-ratio: 2) {
    .border { border: 0.5px solid #999 }
}
@media screen and (-webkit-min-device-pixel-ratio: 3) {
    .border { border: 0.333333px solid #999 }
}