以前总被人问起 iOS Retina 屏,设置 1px 边框,实际显示 2px,如何解决? 原来一直没在意,总觉得这1px能打多少?今天仔细瞅了瞅原生实现的边框和CSS设置的边框,确实差距不小……
上图是原生实现,下图是 CSS 边框,手机上对比更加明显
如何解决呢?搜遍整个谷歌,发现好多人早已开始研究解决方案了。有用0.5px的、有用渐变的、有用border的、有用阴影模拟的等等一系列各种方法,总后总结出一个还算好用的方法:
伪类 + transform
实现原理分为三步
- 原理是把
原先元素
的border 去掉
,- 然后利用
:before 或者 :after 重做 border
,- 并
transform
的scale
缩小一半,原先的元素相对定位
,新做的 border 绝对定位
伪类 + transform实现单条border
结构
<body>
<div class="lines"></div>
</body>
样式
.lines li{
position: relative;
border:none;
}
.lines li:after{
content: '';
position: absolute;
left: 0;
background: #000;
width: 100%;
height: 1px;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
伪类 + transform实现四条border
结构
<body>
<div class="lines"></div>
</body>
样式
<style>
.lines{
width: 200px;
height: 200px;
background: 200px;
background: pink;
border:none;
position: absolute;
}
.lines:after{
content: '';
position: absolute;
top: 0;
left: 0;
border: 1px solid #000;
-webkit-box-sizing: border-box;
/* 转换怪异盒模型,兼容谷歌、safari浏览器 */
box-sizing: border-box;
/* 转换怪异盒模型 */
width: 200%;
height: 200%;
-webkit-transform: scale(0.5);
/* 内容宽高缩小一半,兼容谷歌、safari浏览器 */
transform: scale(0.5);
/* 内容宽高缩小一半,兼容谷歌、safari浏览器 */
-webkit-transform-origin: left top;
/* 缩放中心点从左上角开始,兼容谷歌、safari浏览器 */
transform-origin: left top;
/* 缩放中心点从左上角开始,兼容谷歌、safari浏览器 */
}
</style>