参考链接

怎么画一条0.5px的边（更新）

CSS实现0.5px的边框或线

最后一次探究1px

画一条 0.5 px 的边

CSS

  1. .hr {
  2.     width: 300px;
  3.     background-color: #000;
  4. }
  5. .hr.half-px {
  6.     height: 0.5px;
  7. }
  8. .hr.one-px {
  9.     height: 1px;
  10. }
  11. /* scale */
  12. .hr.scale-half {
  13.     height: 1px;
  14.     transform: scaleY(0.5);
  15.     transform-origin: 50% 10%;
  16. }
  17. /* linear-gradient */
  18. .hr.gradient {
  19.     height: 1px;
  20.     background: linear-gradient(0deg, #fff, #000);
  21. }
  22. /* box-shadow */
  23. .hr.boxshadow {
  24.     height: 1px;
  25.     background: none;
  26.     box-shadow: 0 0.5px 0 #000;
  27. }
  28. /* svg */
  29. .hr.svg {
  30.     height: 1px;
  31.     /*background: url("data:image/svg+xml;utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1px'><line x1='0' y1='0' x2='100%' y2='0' stroke='#000'></line></svg>");*/
  32.     background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMDAlJyBoZWlnaHQ9JzFweCc+PGxpbmUgeDE9JzAnIHkxPScwJyB4Mj0nMTAwJScgeTI9JzAnIHN0cm9rZT0nIzAwMCc+PC9saW5lPjwvc3ZnPg==");
  33. }

HTML

  1. <p>svg</p>
  2. <div class="hr svg"></div>
  4. <p>box-shadow: 0 0.5px 0 #000</p>
  5. <div class="hr boxshadow"></div>
  7. <p>linear-gradient(0deg, #fff, #000)</p>
  8. <div class="hr gradient"></div>
  10. <p>1px + scaleY(0.5)</p>
  11. <div class="hr scale-half"></div>
  13. <p>0.5px</p>
  14. <div class="hr half-px"></div>
  16. <p>1px</p>
  17. <div class="hr one-px"></div>

window.devicePixelRatio 是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。

initial-scale 缩放值越大，当前 viewport 的宽度就会越小，反之亦然。实际改变的是 CSS 像素即设备独立像素的大小。