目前了解到的1px解决方法有以下几种:
一、视觉欺骗
让边框的颜色靠近背景色(通常可以这么做,或者你也可以到打开下面这个地址,设置midpoints中点数为一个大于1的值,点击blend混合按钮后从palette调色板中选取你比较细喜欢的颜色:http://meyerweb.com/eric/tools/color-blend/#FF33FF:::hex),这样人眼看过去就会觉得比较细。但有时候边框颜色和附近的背景色在设计稿上已经定下来了而且二者可能差别还挺大的,这样也没事,你可以用rgba(r, g, b, a)来稍微给边框颜色加一点透明度,一般这点小改动是可以被接受的。
二、伪元素与transform
以下代码参考自vux(一个vue移动端样式、组件、插件库,基于微信weui样式库,存在点小bug,总体不错)。
.vux-1px { position: relative; &:before { content: ""; position: absolute; left: 0; top: 0; width: 200%; height: 200%; border: 1px solid #C7C7C7; color: #C7C7C7; transform-origin: left top; transform: scale(0.5); } }
我自己项目中目前用的代码是这样子的:
.border() { content: ''; position: absolute; left: 0; width: 100%; height: 0; transform-origin: 0 0; transform: scaleY(0.5); } .borderTopBefore { &:before { .border(); border-top: 1px solid @colorBorder; top: 0; } } .borderTopAfter { &:after { .border(); border-top: 1px solid @colorBorder; top: 0; } } .borderBottomBefore { &:before { .border(); border-bottom: 1px solid @colorBorder; bottom: 0; } } .borderBottomAfter { &:after { .border(); border-bottom: 1px solid @colorBorder; bottom: 0; } } .borderVertical() { content: ''; position: absolute; top: 0; height: 100%; width: 0; transform-origin: 0 0; transform: scaleX(0.5); } .borderLeftBefore { &:before { .borderVertical(); left: 0; border-left: 1px solid @colorBorder; } } .borderRightAfter { &:after { .borderVertical(); right: 0; border-right: 1px solid @colorBorder; } }
三、其他
比如用图片什么的,平时项目中我没用过这些方案。
最新评论
大哥资深网民啊,01年我还在念小学。。
看着有点难过。。。
嘿嘿,谢谢老哥,也祝老哥事业蒸蒸日上。
我是你唯一的药学类友情链接网站。 作为一个80后的过来人祝福你,生活越来越好。
这篇文章,我们中学那会老师课堂上念给我们听的。
哈哈哈哈哈,没想到啊, 我有手抄版
嗯,是的
好心办坏事多了去啦
哈哈,是的,我15年末来上海写代码了,一晃三年多过去了,好快。
今天看QQ好友的时候突然看到了你的名字,想起几年前在药品国际注册群挺活跃/厉害的你,现在不见踪影了。就搜了一下,没想到你现在转行去写代码了... (刚才打漏了一句话...)