css实现小于1px的移动端网页边框线
移动端网页如果直接用最小的1px设定边框线,会显得很粗很难看。是否可以像app里边的那样设定更细的线呢?答案是肯定的,如下为sass的一个mixin, 供参考:
@mixin smlBorder($borderColor:$baseBorderColor,$style:solid){ position:relative; &:after, &:before{ content: ''; display: block; color: $borderColor; position: absolute; top: 0; left: 0; z-index: 2; -webkit-transform-origin: left top; box-sizing:border-box; width:100%; height:100%; } &:after{ border-left: 1px $style $borderColor; border-right: 1px $style $borderColor; } &:before{ border-top: 1px $style $borderColor; border-bottom: 1px $style $borderColor; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5) { &:after { -webkit-transform: scaleX(.7); transform: scaleX(.7); width:142.857%; } &:before { -webkit-transform: scaleY(.7); transform: scaleY(.7); height:142.857%; } } @media only screen and (-webkit-min-device-pixel-ratio: 2.0) { &:after { -webkit-transform: scaleX(.5); transform: scaleX(.5); width:200%; } &:before { -webkit-transform: scaleY(.5); transform: scaleY(.5); height:200%; } } }
可留意到技术点在于判断-webkit-min-device-pixel-ratio,然后对border设定transform: scale().
其他border-bottom相关类似方法。
发表评论