方法一:
- .borderB1px { border-bottom: 1px solid #e3e3e3 }
- @media screen and (-webkit-min-device-pixel-ratio: 2) {
- .borderB1px { border-bottom: 0.5px solid #e3e3e3 }
- }
- @media screen and (-webkit-min-device-pixel-ratio: 3) {
- .borderB1px { border-bottom: 0.333333px solid #e3e3e3 }
- }
方法二:
- .wi-cell {
- position: relative;
- }
- .wi-cell:before {
- content: " ";
- position: absolute;
- left: 0;
- top: 0;
- right: 0;
- height: 1px;
- border-top: 1px solid #e5e5e5;
- color: #e5e5e5;
- -webkit-transform-origin: 0 0;
- transform-origin: 0 0;
- -webkit-transform: scaleY(0.5);
- transform: scaleY(0.5);
- left: 15px;
- }
原理: 父级设置相对定位, 通过伪类来给父级添加子元素设置相对于父级的绝对定位, 设置其高为一个像素, 然后设置上边框也为一个像素, 最后通过 CSS3 的 transform 属性把伪元素缩放为原来的一半大小.
1 像素问题
来源: http://www.bubuko.com/infodetail-3692393.html