首页 > 代码库 > css 温故而知新 1px的问题
css 温故而知新 1px的问题
解决方法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的问题
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。