首页
Javascript
Html
Css
Node.js
Electron
移动开发
工具类
服务端
浏览器相关
前端收藏
其他

移动端retina屏1px细边框问题

2017年02月15日 发布 阅读(349) 作者:懒炖

移动端web开发,无可避免会遇到1px边框问题,有很多解决方案,但也各有优劣。

retina屏样式,可以放在一个媒体查询里~

  1. @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  2. /*相关retina屏css*/
  3. }

下面所有方法都是通过CSS重构border,让视觉看起来是一个细边框,所以原有的border必须设置为none0

如果边框还带圆角,支持的都不是特别好~

1、利用background-image渐变、base64图片svg图片

background-sizebackground-size都必须要设置。

  1. /*4边框*/
  2. .border-bg-4 {
  3. border-radius: 0;
  4. border: 0;
  5. background-image:
  6. -webkit-linear-gradient(top, transparent 50%, #d9d9d9 50%),
  7. -webkit-linear-gradient(bottom, transparent 50%, #d9d9d9 50%),
  8. -webkit-linear-gradient(left, transparent 50%, #d9d9d9 50%),
  9. -webkit-linear-gradient(right, transparent 50%, #d9d9d9 50%);
  10. background-image:
  11. linear-gradient(to top,transparent 50%,#d9d9d9 50%),
  12. linear-gradient(to bottom, transparent 50%, #d9d9d9 50%),
  13. linear-gradient(to left, transparent 50%, #d9d9d9 50%),
  14. linear-gradient(to right, transparent 50%, #d9d9d9 50%);
  15. background-size: 100% 1px, 100% 1px, 1px 100%, 1px 100%;
  16. background-position: top center, bottom center, top left, right center;
  17. background-repeat: no-repeat;
  18. }
  19. /*1上边框*/
  20. .border-bg-top {
  21. border-radius: 0;
  22. border-top: 0;
  23. background-image:
  24. -webkit-linear-gradient(top, transparent 50%, #d9d9d9 50%);
  25. background-image:
  26. linear-gradient(to top,transparent 50%,#d9d9d9 50%);
  27. background-size: 100% 1px;
  28. background-position: top center;
  29. background-repeat: no-repeat;
  30. }
  31. /*利用base64图片*/
  32. /*这里用到了两张图片的base64,上下是同一张图片,左右是同一张图片*/
  33. .border_bg-img {
  34. border: 0;
  35. border-radius: 0;
  36. background-image: url(data:image/gif;base64,R0lGODlhAQACAJEAAAAAAP///9nZ2f///yH5BAEAAAMALAAAAAABAAIAAAIC1AoAOw==)/*上*/,
  37. url(data:image/gif;base64,R0lGODlhAQACAJEAAAAAAP///9nZ2f///yH5BAEAAAMALAAAAAABAAIAAAIC1AoAOw==)/*下*/,
  38. url(data:image/gif;base64,R0lGODlhAgABAJEAAAAAAP///9nZ2f///yH5BAEAAAMALAAAAAACAAEAAAIC1AoAOw==)/*左*/,
  39. url(data:image/gif;base64,R0lGODlhAgABAJEAAAAAAP///9nZ2f///yH5BAEAAAMALAAAAAACAAEAAAIC1AoAOw==)/*右*/;
  40. background-size: 100% 1px, 100% 1px, 1px 100%, 1px 100%;
  41. background-position: top center, bottom center, left top, right center;
  42. background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  43. }
  44. /*利用svg*/
  45. .border-svg-4 {
  46. border: none;
  47. border-radius: 0;
  48. background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#d9d9d9' x='0' y='0' width='100%' height='0.5' /></svg>"), /*bottom*/
  49. url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1' height='100%'><rect fill='#d9d9d9' x='0' y='0' width='0.5' height='100%' /></svg>"), /*left*/
  50. url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1' height='100%'><rect fill='#d9d9d9' x='0' y='0' width='0.5' height='100%' /></svg>"), /*right*/
  51. url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#d9d9d9' x='0' y='0' width='100%' height='0.5' /></svg>")/*top*/
  52. ;
  53. /*bottom,left,right,top position*/
  54. background-position: 0 100%, 0 0, 100% 0, 100% 0;
  55. background-repeat: no-repeat;
  56. }
  57. .border-svg-bottom {
  58. border-bottom: 0 none;
  59. border-radius: 0;
  60. background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#d9d9d9' x='0' y='0' width='100%' height='0.5' /></svg>");
  61. /*bottom*/
  62. background-position: 0 100%;
  63. background-repeat: no-repeat;
  64. }
  65. .border-svg-top {
  66. border-top: 0 none;
  67. border-radius: 0;
  68. background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#d9d9d9' x='0' y='0' width='100%' height='0.5' /></svg>");
  69. /*top position*/
  70. background-position: 100% 0;
  71. background-repeat: no-repeat;
  72. }

svg的坐标计算是从左上角开始的~

2、利用伪类元素transform:scale(推荐)

原理就是利用这里的before伪元素,相对父级绝对定位,重构边框

  1. /*4边框,关键在于 height:200% */
  2. .border-scale-4-1px {
  3. position: relative;
  4. border: 0;
  5. border-radius: 0;
  6. }
  7. .border-scale-4-1px:before {
  8. content: "";
  9. position: absolute;
  10. top: 0;
  11. left: 0;
  12. width: 200%;
  13. border: 1px solid #d9d9d9;
  14. height: 200%;
  15. -webkit-transform: scale(0.5);
  16. -ms-transform: scale(0.5);
  17. transform: scale(0.5);
  18. -webkit-transform-origin: 0 0;
  19. -ms-transform-origin: 0 0;
  20. transform-origin: 0 0;
  21. -webkit-box-sizing: border-box;
  22. box-sizing: border-box;
  23. }
  24. /*1上边框,可以不设置height*/
  25. .border-scale-top-1px {
  26. position: relative;
  27. border-top: 0;
  28. border-radius: 0;
  29. }
  30. .border-scale-top-1px:before {
  31. content: "";
  32. position: absolute;
  33. top: 0;
  34. left: 0;
  35. width: 200%;
  36. border-top: 1px solid #d9d9d9;
  37. -webkit-transform: scale(0.5);
  38. -ms-transform: scale(0.5);
  39. transform: scale(0.5);
  40. -webkit-transform-origin: 0 0;
  41. -ms-transform-origin: 0 0;
  42. transform-origin: 0 0;
  43. -webkit-box-sizing: border-box;
  44. box-sizing: border-box;
  45. }
版权声明:本站文章除特别声明外,均采用署名-非商业性使用-禁止演绎 4.0 国际 许可协议,如需转载,请注明出处

评论

  •