h5 1px 细线如何实现
看了很多方案，使用伪元素的方案最合理，简单，容易理解
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>1px</title> <style> /* box-shadow方案 */ .box-shadow-1px { width:100px; height:100px; box-shadow: inset 0px -1px 1px -1px #c8c7cc; } .border-1px { position: relative; } @media screen and (-webkit-min-device-pixel-ratio: 2) { .border-1px:before { content: " "; position: absolute; left: 0; top: 0; width: 100%; height: 1px; border-top: 1px solid #D9D9D9; color: #D9D9D9; -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); } } @media screen and (-webkit-min-device-pixel-ratio: 3) { .border-1px:before { content: " "; position: absolute; left: 0; top: 0; width: 100%; height: 1px; border-top: 1px solid #D9D9D9; color: #D9D9D9; -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scaleY(0.333); transform: scaleY(0.333); } } </style> </head> <body> <!-- <div class="box-shadow-1px"> 1px border </div> --> <div class="border-1px"> 1px border 伪元素 </div> </body> </html>
主要原理
1. 是使用媒体查询，通过伪元素（::after 或 :before）来实现，针对不同的设备 dpr ，进行不同比例的缩放，
- 例如 dpr 设备像素比=2，说明，1px = 2 个物理像素，所以需要缩小一倍
- 如果 dpr=3，则 1px=3个物理像素，所以需要同比缩小至 1/3
2. 给要加细线的盒子元素设相对定位 position:relative
3. 给伪元素样式设绝对定位 position:absolute;
4. 如果是
- 上面的线，通过定位 top:0;left:0;width:100%;height:线的高度来实现
- 下面的线，通过定位 bottom:0; left:0;width:100%;height:线的高度来实现
- 左边的线，通过定位 top:0;left:0;width:线的高度; height:100%；border-left 来实现
- 右边的线，通过定位 top:0;right:0;width:线的高度; height:100%；border-right 来实现
