css 温故而知新 1px的问题

2021-06-30 06:04

阅读：575

标签：form cal log 使用 orm tom lex ott 问题

解决方法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 }
}

css 温故而知新 1px的问题

标签：form cal log 使用 orm tom lex ott 问题

原文地址：http://www.cnblogs.com/CyLee/p/7137075.html

上一篇：在jboss上部署web应用

下一篇：js高级程序设计

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：css 温故而知新 1px的问题
文章链接：http://soscw.com/essay/99716.html

亲，登录后才可以留言！

css 温故而知新 1px的问题

评论

热门文章

推荐文章

最新文章

置顶文章