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

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

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

移动端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 国际 许可协议,如需转载,请注明出处

评论

  •  
  • 使用 media query 进行 IE 的 CSS Hack

    通过 media query 进行 CSS 的 hack。在 IE 中它们可以识别出这些特殊的符号 \0,\, 以及 \9,然后结合 media query 可以更好进行样式的区分

    发布:2019-08-07 阅读(84)

  • Css Grid fr单位

    css fr 单位是一个自适应单位,fr单位被用于在一系列长度值中分配剩余空间,如果多个已指定了多个部分,则剩下的空间根据各自的数字按比例分配。

    发布:2019-02-28 阅读(491)

  • CSS Grid网格布局指南(学习)

    CSS网格布局是CSS中最强大的布局系统。它是一个二维系统,这意味着它可以处理列和行,不像flexbox主要是一维系统。CSS网格布局用于将页面分割成数个主要区域,或者用来定义组件内部元素间大小、位置和图层之间的关系。像表格一样,网格布局让我们能够按行或列来对齐元素。 但是,使用CSS网格可能还是比CSS表格更容易布局。 例如,网格容器的子元素可以自己定位,以便它们像CSS定位的元素一样,真正的有重叠和层次。

    发布:2019-02-28 阅读(448)

  • 什么是Sass,SCSS与它是什么关系?

    什么是Sass,SCSS与它是什么关系?

    发布:2019-02-26 阅读(444)

  • css3 自定义浏览器滚动条(scrollbar)

    通过-webkit-scrollbar自定义浏览器滚动条,支持webkit的浏览器可正常显示(如chrome,safari,QQ浏览器,360极速等)

    发布:2019-01-28 阅读(506)

  • CSS中伪类和伪元素总结

    css伪类和伪元素有什么区别?

    发布:2019-01-14 阅读(375)

  • 视窗单位vm,vh,vmin,vmax

    记录下响应式布局单位(视窗单位:viewport units)的应用,最近用electron开发桌面应用,用到vh,vw还是蛮方便的.

    发布:2019-01-09 阅读(170)

  • 妙法攻略:渐变虚框及边框滚动动画的纯CSS实现

    CSS3实现滚动边框,渐变边框

    发布:2018-12-07 来源:张鑫旭

  • CSS3 手册

    CSS3 是层叠样式表(Cascading Style Sheets)语言的最新版本,旨在扩展CSS2.1。它带来了许多期待已久的新特性, 例如圆角、阴影、gradients(渐变) 、transitions(过渡) 与 animations(动画) 。以及新的布局方式,如 multi-columns 、 flexible box 与 grid layouts。实验性特性以浏览器引擎为前缀(vendor-prefixed),应避免在生产环境中使用,或极其谨慎地使用,因为将来它们的语法和语义都有可能被更改。

    发布:2018-11-06 来源:mozilla

  • 探究 CSS 解析原理

    浏览器 CSS 模块负责 CSS 脚本解析,并为每个 Element 计算出样式。CSS 模块虽小,但是计算量大,设计不好往往成为浏览器性能的瓶颈。

    发布:2017-12-15 阅读(13)

  • [布局概念] 关于CSS-BFC深入理解

    BFC(Block formatting context)直译为&amp;quot;块级格式化上下文&amp;quot;。它**是一个独立的渲染区域**,只有**Block\-level box**参与(在下面有解释), 它规定了内部的Block\-level Box如何布局,并且与这个区域外部毫不相干。

    发布:2017-06-09 阅读(35)

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

    retina屏下(window.devicepixelratio>1),1px的边框会被渲染成2px,看起会比较粗,如何解决?

    发布:2017-02-15 阅读(488)

  • 隐藏input type=number元素,右侧的上下箭头

    通过CSS隐藏input='number'时,右侧的箭头

    发布:2015-08-21 阅读(710)

  • 移动端 UC浏览器字体放大的问题

    在做移动端页面时,发现UC浏览器在文字居多的页面(如文章页面、关于我们页面),字体会自动放大。其他的浏览器都没有问题~~

    发布:2015-08-17 阅读(416)

  • 利用rgba和filter设置CSS背景颜色半透明且不影响子元素,兼容IE6-8

    css设置子元素半透明,兼容IE6-8

    发布:2013-05-28 阅读(455)

  • text-overflow:clip | ellipsis 单行截断文字

    利用CSS截断单行文字,溢出的显示"..."

    发布:2012-11-23 阅读(424)

  • 禁止<textarea>标签右下角拉动

    HTML标签textarea在大部分浏览器中只要指定行(rows)和列(cols)属性,就可以规定 textarea 的尺寸,大小就不会改变,不过更好的办法是使用 CSS 的 height 和 width 属性,但是Chrome,Safari和FireFox渲染的效果不同,可以拖动右下角图标改变大小

    发布:2012-11-14 阅读(416)

  • 去掉Chrome,Safari等浏览器input,select,textarea等form元素的高亮效果

    chrome、safari等现代浏览器,input,textarea,select等一些Form元素,会有一个默认的高亮样式

    发布:2012-11-13 阅读(423)

  • CSS设置超链接a:link,a:visited,a:hover,a:active的顺序

    CSS针对超链接4个状态的设置是有顺序的,顺序不对,a链接的各种状态可能不会生效

    发布:2012-10-23 阅读(478)

  • CSS常用hack技巧

    在当前的WEB前端页面制作中,鉴于市面上浏览器种类繁多(IE6-IE9、firefox、Chrome、Safari、Opera等等),各种浏览器对CSS的解析效果会有所不同(少数),所以要想让页面完全的兼容所有浏览器,就必须要用css hack。可能不同的开发人员,使用的hack方式不一样,但最终的目的都是希望各种浏览器渲染出同样的页面效果

    发布:2012-10-16 阅读(597)

  • 利用CSS制作尖角

    用两个◆制作尖角(引用腾讯微博中的做法)

    发布:2012-10-15 阅读(449)