sass 上下边框1像素实现

最新推荐文章于 2025-07-07 15:38:25 发布

原创最新推荐文章于 2025-07-07 15:38:25 发布 · 1.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#上下边框1像素实现

sass 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种使用Sass Mixin实现不同设备像素比下元素顶部和底部边界线的解决方案。通过媒体查询调整边界线的显示效果，确保在高清屏幕上也能呈现清晰的线条。

@mixin border-t-1px($color) {

  position: relative;

    &::before {

    display: block;

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    border-top: 1px solid $color;

    content: ' ';

  }

}

@mixin border-b-1px($color) {

  position: relative;

  &::after {

  display: block;

  position: absolute;

  left: 0;

  bottom: 0;

  width: 100%;

  border-top: 1px solid $color;

  content: ' ';

}

}

@media(-webkit-min-device-pixel-ratio:1.5), (min-device-pixel-ratio:1.5)
 {

.border-t-1px {

&::before {

-webkit-transform: 
scaleY(0.7);

transform: 
scaleY(0.7);

}

}

}

@media(-webkit-min-device-pixel-ratio:2), (min-device-pixel-ratio:2)
 {

.border-t-1px {

&::before {

-webkit-transform: 
scaleY(0.5);

transform: 
scaleY(0.5);

}

}

}

@media(-webkit-min-device-pixel-ratio:2.5), (min-device-pixel-ratio:2.5)
 {

.border-t-1px {

&::before {

-webkit-transform: 
scaleY(0.33333334);

transform: 
scaleY(0.33333334);

}

}

}

@media(-webkit-min-device-pixel-ratio:1.5), (min-device-pixel-ratio:1.5)
 {

.border-b-1px {

&::after {

-webkit-transform: 
scaleY(0.7);

transform: 
scaleY(0.7);

}

}

}

@media(-webkit-min-device-pixel-ratio:2), (min-device-pixel-ratio:2)
 {

.border-b-1px {

&::after {

-webkit-transform: 
scaleY(0.5);

transform: 
scaleY(0.5);

}

}

}

@media(-webkit-min-device-pixel-ratio:2.5), (min-device-pixel-ratio:2.5)
 {

.border-b-1px {

&::after {

-webkit-transform: 
scaleY(0.33333334);

transform: 
scaleY(0.33333334);

}

}

}