Home Verkennen Help
Registreren Inloggen
root
/
myBlogs_3
1
0
Vork 0
Bestanden Issues 0 Pull-aanvragen 0 Wiki
Boom: 53415efc23
Aftakkingen Labels
myBlogs_3
/
dist
/
CSS
/
2018_10_21_01.html

2018_10_21_01.html 40 KB
Geschiedenis Ruwe

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142 
  1. <!DOCTYPE html>
    2. 

  2. <html lang="en-US">
    3. 

  3.   <head>
    4. 

  4.     <meta charset="utf-8">
    5. 

  5.     <meta name="viewport" content="width=device-width,initial-scale=1">
    6. 

  6.     <title>1px 边框问题 | 看白鹿的博客</title>
    7. 

  7.     <meta name="description" content="只有敢于尝试,才能品味人生.">
    8. 

  8.     <link rel="icon" href="/logo.png">
    9. 

  9.     
    10. 

  10.     <link rel="preload" href="/assets/css/0.styles.828f45ec.css" as="style"><link rel="preload" href="/assets/js/app.268f9f67.js" as="script"><link rel="preload" href="/assets/js/3.515b53d6.js" as="script"><link rel="preload" href="/assets/js/64.eb8d2554.js" as="script"><link rel="preload" href="/assets/js/61.dc32bd44.js" as="script"><link rel="prefetch" href="/assets/js/10.dee33bc4.js"><link rel="prefetch" href="/assets/js/100.d2a60c39.js"><link rel="prefetch" href="/assets/js/101.74595f21.js"><link rel="prefetch" href="/assets/js/102.29b3d306.js"><link rel="prefetch" href="/assets/js/103.f271300d.js"><link rel="prefetch" href="/assets/js/104.43072e25.js"><link rel="prefetch" href="/assets/js/105.e14b9594.js"><link rel="prefetch" href="/assets/js/106.48e873e9.js"><link rel="prefetch" href="/assets/js/107.706275ab.js"><link rel="prefetch" href="/assets/js/108.e8e54758.js"><link rel="prefetch" href="/assets/js/109.b9ff54ab.js"><link rel="prefetch" href="/assets/js/11.5876b1fb.js"><link rel="prefetch" href="/assets/js/110.393bd110.js"><link rel="prefetch" href="/assets/js/111.ec6c71ae.js"><link rel="prefetch" href="/assets/js/112.607561e0.js"><link rel="prefetch" href="/assets/js/113.9eced018.js"><link rel="prefetch" href="/assets/js/114.5674d7c9.js"><link rel="prefetch" href="/assets/js/115.de57148c.js"><link rel="prefetch" href="/assets/js/116.6a5c1f56.js"><link rel="prefetch" href="/assets/js/117.f6a71ed6.js"><link rel="prefetch" href="/assets/js/118.a1e7c870.js"><link rel="prefetch" href="/assets/js/119.b1f0371f.js"><link rel="prefetch" href="/assets/js/12.e8431088.js"><link rel="prefetch" href="/assets/js/120.8106c4ab.js"><link rel="prefetch" href="/assets/js/121.92de7c46.js"><link rel="prefetch" href="/assets/js/13.398dd7db.js"><link rel="prefetch" href="/assets/js/14.90bfbf87.js"><link rel="prefetch" href="/assets/js/15.f69596d7.js"><link rel="prefetch" href="/assets/js/16.3608be61.js"><link rel="prefetch" href="/assets/js/17.7820a766.js"><link rel="prefetch" href="/assets/js/18.8f99a19b.js"><link rel="prefetch" href="/assets/js/19.45176d0e.js"><link rel="prefetch" href="/assets/js/20.232982ac.js"><link rel="prefetch" href="/assets/js/21.1a51c65e.js"><link rel="prefetch" href="/assets/js/22.883de588.js"><link rel="prefetch" href="/assets/js/23.c9414590.js"><link rel="prefetch" href="/assets/js/24.6e67591d.js"><link rel="prefetch" href="/assets/js/25.6747357b.js"><link rel="prefetch" href="/assets/js/26.12c8e8e3.js"><link rel="prefetch" href="/assets/js/27.0783adaa.js"><link rel="prefetch" href="/assets/js/28.7a6ffcb0.js"><link rel="prefetch" href="/assets/js/29.08970e3a.js"><link rel="prefetch" href="/assets/js/30.abb98459.js"><link rel="prefetch" href="/assets/js/31.b8c17c43.js"><link rel="prefetch" href="/assets/js/32.5fe22297.js"><link rel="prefetch" href="/assets/js/33.b802736a.js"><link rel="prefetch" href="/assets/js/34.9893ce1f.js"><link rel="prefetch" href="/assets/js/35.c3a8a6fb.js"><link rel="prefetch" href="/assets/js/36.3bb4a7b9.js"><link rel="prefetch" href="/assets/js/37.f2ad4731.js"><link rel="prefetch" href="/assets/js/38.95bb1c88.js"><link rel="prefetch" href="/assets/js/39.2b5f646d.js"><link rel="prefetch" href="/assets/js/4.389f8161.js"><link rel="prefetch" href="/assets/js/40.42d10f93.js"><link rel="prefetch" href="/assets/js/41.5e607831.js"><link rel="prefetch" href="/assets/js/42.9a147000.js"><link rel="prefetch" href="/assets/js/43.3a493ecc.js"><link rel="prefetch" href="/assets/js/44.68dd983e.js"><link rel="prefetch" href="/assets/js/45.0eb19dd6.js"><link rel="prefetch" href="/assets/js/46.2bc4b680.js"><link rel="prefetch" href="/assets/js/47.3de0e22f.js"><link rel="prefetch" href="/assets/js/48.2aa9b621.js"><link rel="prefetch" href="/assets/js/49.4e0c7e81.js"><link rel="prefetch" href="/assets/js/5.d4651190.js"><link rel="prefetch" href="/assets/js/50.f9790d5d.js"><link rel="prefetch" href="/assets/js/51.d03e4d02.js"><link rel="prefetch" href="/assets/js/52.cd6e50d5.js"><link rel="prefetch" href="/assets/js/53.c56ed5e8.js"><link rel="prefetch" href="/assets/js/54.af31649a.js"><link rel="prefetch" href="/assets/js/55.e6c76277.js"><link rel="prefetch" href="/assets/js/56.59b2e0fa.js"><link rel="prefetch" href="/assets/js/57.e75a4f7d.js"><link rel="prefetch" href="/assets/js/58.49abcc13.js"><link rel="prefetch" href="/assets/js/59.62d47fda.js"><link rel="prefetch" href="/assets/js/6.4bfb03ad.js"><link rel="prefetch" href="/assets/js/60.d5bd9a2b.js"><link rel="prefetch" href="/assets/js/62.552676dd.js"><link rel="prefetch" href="/assets/js/63.86db7a84.js"><link rel="prefetch" href="/assets/js/65.405a53d2.js"><link rel="prefetch" href="/assets/js/66.2e2127ea.js"><link rel="prefetch" href="/assets/js/67.7958d7aa.js"><link rel="prefetch" href="/assets/js/68.5bb76a01.js"><link rel="prefetch" href="/assets/js/69.be77e031.js"><link rel="prefetch" href="/assets/js/7.5373c3ff.js"><link rel="prefetch" href="/assets/js/70.5f8c4d7e.js"><link rel="prefetch" href="/assets/js/71.6b83dc48.js"><link rel="prefetch" href="/assets/js/72.52e71197.js"><link rel="prefetch" href="/assets/js/73.ed29139b.js"><link rel="prefetch" href="/assets/js/74.2da95d6f.js"><link rel="prefetch" href="/assets/js/75.6bdfc674.js"><link rel="prefetch" href="/assets/js/76.539f7625.js"><link rel="prefetch" href="/assets/js/77.bd2b1d1c.js"><link rel="prefetch" href="/assets/js/78.574e43b8.js"><link rel="prefetch" href="/assets/js/79.3f2b6e03.js"><link rel="prefetch" href="/assets/js/8.c12591c5.js"><link rel="prefetch" href="/assets/js/80.343ef6a4.js"><link rel="prefetch" href="/assets/js/81.dbea413c.js"><link rel="prefetch" href="/assets/js/82.72df572c.js"><link rel="prefetch" href="/assets/js/83.8dfa08ec.js"><link rel="prefetch" href="/assets/js/84.faf124d2.js"><link rel="prefetch" href="/assets/js/85.4b9fd62d.js"><link rel="prefetch" href="/assets/js/86.f7796237.js"><link rel="prefetch" href="/assets/js/87.b4b84c5c.js"><link rel="prefetch" href="/assets/js/88.e4e04624.js"><link rel="prefetch" href="/assets/js/89.8e8af2bc.js"><link rel="prefetch" href="/assets/js/9.d366d0b0.js"><link rel="prefetch" href="/assets/js/90.4ef24970.js"><link rel="prefetch" href="/assets/js/91.642c380b.js"><link rel="prefetch" href="/assets/js/92.d31cd825.js"><link rel="prefetch" href="/assets/js/93.61ebd91b.js"><link rel="prefetch" href="/assets/js/94.ce97a94d.js"><link rel="prefetch" href="/assets/js/95.2315c696.js"><link rel="prefetch" href="/assets/js/96.ee1be386.js"><link rel="prefetch" href="/assets/js/97.a4d99f7c.js"><link rel="prefetch" href="/assets/js/98.3470f3b8.js"><link rel="prefetch" href="/assets/js/99.bf865b2a.js"><link rel="prefetch" href="/assets/js/vendors~docsearch.431cfe91.js">
    11. 

  11.     <link rel="stylesheet" href="/assets/css/0.styles.828f45ec.css">
    12. 

  12.   </head>
    13. 

  13.   <body>
    14. 

  14.     <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><!----> <span class="site-name">看白鹿的博客</span></a> <div class="links"><form id="search-form" role="search" class="algolia-search-wrapper search-box"><input id="algolia-search-input" class="search-query"></form> <nav class="nav-links can-hide"><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="前端" class="dropdown-title"><span class="title">前端</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/CSS/" class="nav-link router-link-active">CSS</a></li><li class="dropdown-item"><!----> <a href="/FLUTTER/" class="nav-link">flutter</a></li><li class="dropdown-item"><!----> <a href="/GIT/" class="nav-link">GIT</a></li><li class="dropdown-item"><!----> <a href="/JavaScript/" class="nav-link">JavaScript</a></li><li class="dropdown-item"><!----> <a href="/REACT/" class="nav-link">react</a></li><li class="dropdown-item"><!----> <a href="/VUE/" class="nav-link">vue</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="后台" class="dropdown-title"><span class="title">后台</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/NODE/" class="nav-link">node</a></li><li class="dropdown-item"><!----> <a href="/UBUNTU/" class="nav-link">ubuntu</a></li><li class="dropdown-item"><!----> <a href="/ffmpeg/" class="nav-link">ffmpeg</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="其他" class="dropdown-title"><span class="title">其他</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/IDE/" class="nav-link">IDE</a></li><li class="dropdown-item"><!----> <a href="/About/WHY.html" class="nav-link">待了解</a></li><li class="dropdown-item"><!----> <a href="/INTERVIEW/" class="nav-link">面试</a></li></ul></div></div><div class="nav-item"><a href="https://github.com/Johnhong9527" target="_blank" rel="noopener noreferrer" class="nav-link external">
    15. 

  15.   GitHub
    16. 

  16.   <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="前端" class="dropdown-title"><span class="title">前端</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/CSS/" class="nav-link router-link-active">CSS</a></li><li class="dropdown-item"><!----> <a href="/FLUTTER/" class="nav-link">flutter</a></li><li class="dropdown-item"><!----> <a href="/GIT/" class="nav-link">GIT</a></li><li class="dropdown-item"><!----> <a href="/JavaScript/" class="nav-link">JavaScript</a></li><li class="dropdown-item"><!----> <a href="/REACT/" class="nav-link">react</a></li><li class="dropdown-item"><!----> <a href="/VUE/" class="nav-link">vue</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="后台" class="dropdown-title"><span class="title">后台</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/NODE/" class="nav-link">node</a></li><li class="dropdown-item"><!----> <a href="/UBUNTU/" class="nav-link">ubuntu</a></li><li class="dropdown-item"><!----> <a href="/ffmpeg/" class="nav-link">ffmpeg</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="其他" class="dropdown-title"><span class="title">其他</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/IDE/" class="nav-link">IDE</a></li><li class="dropdown-item"><!----> <a href="/About/WHY.html" class="nav-link">待了解</a></li><li class="dropdown-item"><!----> <a href="/INTERVIEW/" class="nav-link">面试</a></li></ul></div></div><div class="nav-item"><a href="https://github.com/Johnhong9527" target="_blank" rel="noopener noreferrer" class="nav-link external">
    17. 

  17.   GitHub
    18. 

  18.   <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/CSS/" class="sidebar-link">CSS 目录</a></li><li><a href="/CSS/cases.html" class="sidebar-link">案例收集</a></li><li><a href="/CSS/2018_10_21_01.html" class="active sidebar-link">1px 边框问题</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/CSS/2018_10_21_02.html" class="sidebar-link">border-style</a></li><li><a href="/CSS/2018_10_21_03.html" class="sidebar-link">box-flex使用说明</a></li><li><a href="/CSS/2018_10_21_04.html" class="sidebar-link">css动画</a></li><li><a href="/CSS/2018_10_21_05.html" class="sidebar-link">加速网站的最佳实践</a></li><li><a href="/CSS/principle.html" class="sidebar-link">CSS盒子</a></li><li><a href="/CSS/2019_04_11_01.html" class="sidebar-link">Grid 布局教程</a></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="_1px-边框问题"><a href="#_1px-边框问题" class="header-anchor">#</a> 1px 边框问题</h1> <p><a href="https://juejin.im/entry/584e427361ff4b006cd22c7c" target="_blank" rel="noopener noreferrer">7 种方法解决移动端 Retina 屏幕 1px 边框问题<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p> <p><a href="http://imweb.io/topic/55e3d402771670e207a16bd1" target="_blank" rel="noopener noreferrer">在 retina 屏中实现 1px border 效果<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p> <h4 id="下文出自7-种方法解决移动端-retina-屏幕-1px-边框问题"><a href="#下文出自7-种方法解决移动端-retina-屏幕-1px-边框问题" class="header-anchor">#</a> 下文出自<a href="https://juejin.im/entry/584e427361ff4b006cd22c7c" target="_blank" rel="noopener noreferrer">7 种方法解决移动端 Retina 屏幕 1px 边框问题<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></h4> <h3 id="造成边框变粗的原因"><a href="#造成边框变粗的原因" class="header-anchor">#</a> 造成边框变粗的原因</h3> <p>其实这个原因很简单，因为 css 中的 1px 并不等于移动设备的 1px，这些由于不同的手机有不同的像素密度。在 window 对象中有一个 devicePixelRatio 属性，他可以反应 css 中的像素与设备的像素比。</p> <blockquote><p>devicePixelRatio 的官方的定义为：设备物理像素和设备独立像素的比例，也就是 devicePixelRatio = 物理像素 / 独立像素。</p></blockquote> <h3 id="_0-5px-边框"><a href="#_0-5px-边框" class="header-anchor">#</a> 0.5px 边框</h3> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">if</span> <span class="token punctuation">(</span>window<span class="token punctuation">.</span>devicePixelRatio <span class="token operator">&amp;&amp;</span> devicePixelRatio <span class="token operator">&gt;=</span> <span class="token number">2</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    19. 

  19.     <span class="token keyword">var</span> testElem <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">&quot;div&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    20. 

  20.     testElem<span class="token punctuation">.</span>style<span class="token punctuation">.</span>border <span class="token operator">=</span> <span class="token string">&quot;.5px solid transparent&quot;</span><span class="token punctuation">;</span>
    21. 

  21.     document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>testElem<span class="token punctuation">)</span><span class="token punctuation">;</span>
    22. 

  22.     <span class="token keyword">if</span> <span class="token punctuation">(</span>testElem<span class="token punctuation">.</span>offsetHeight <span class="token operator">==</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    23. 

  23.         document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">&quot;html&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">&quot;hairlines&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    24. 

  24.     <span class="token punctuation">}</span>
    25. 

  25.     document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">removeChild</span><span class="token punctuation">(</span>testElem<span class="token punctuation">)</span><span class="token punctuation">;</span>
    26. 

  26. <span class="token punctuation">}</span>
    27. 

  27. <span class="token comment">// 脚本应该放在内，如果在里面运行，需要包装 $(document).ready(function() {})</span>
    28. 

  28. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">div</span> <span class="token punctuation">{</span>
    29. 

  29.     <span class="token property">border</span><span class="token punctuation">:</span> 1px solid #bbb<span class="token punctuation">;</span>
    30. 

  30. <span class="token punctuation">}</span>
    31. 

  31. <span class="token selector">.hairlines div</span> <span class="token punctuation">{</span>
    32. 

  32.     <span class="token property">border-width</span><span class="token punctuation">:</span> 0.5px<span class="token punctuation">;</span>
    33. 

  33. <span class="token punctuation">}</span>
    34. 

  34. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h3 id="使用-border-image-实现"><a href="#使用-border-image-实现" class="header-anchor">#</a> 使用 border-image 实现</h3> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token comment">/* 底部边框 */</span>
    35. 

  35. <span class="token selector">.border-bottom-1px</span> <span class="token punctuation">{</span>
    36. 

  36.     <span class="token property">border-width</span><span class="token punctuation">:</span> 0 0 1px 0<span class="token punctuation">;</span>
    37. 

  37.     <span class="token property">-webkit-border-image</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>linenew.png<span class="token punctuation">)</span></span> 0 0 2 0 stretch<span class="token punctuation">;</span>
    38. 

  38.     <span class="token property">border-image</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>linenew.png<span class="token punctuation">)</span></span> 0 0 2 0 stretch<span class="token punctuation">;</span>
    39. 

  39. <span class="token punctuation">}</span>
    40. 

  40. <span class="token comment">/* 上下边框 */</span>
    41. 

  41. <span class="token selector">.border-image-1px</span> <span class="token punctuation">{</span>
    42. 

  42.     <span class="token property">border-width</span><span class="token punctuation">:</span> 1px 0<span class="token punctuation">;</span>
    43. 

  43.     <span class="token property">-webkit-border-image</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>linenew.png<span class="token punctuation">)</span></span> 2 0 stretch<span class="token punctuation">;</span>
    44. 

  44.     <span class="token property">border-image</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>linenew.png<span class="token punctuation">)</span></span> 2 0 stretch<span class="token punctuation">;</span>
    45. 

  45. <span class="token punctuation">}</span>
    46. 

  46. <span class="token comment">/* 使用Media Query做兼容 */</span>
    47. 

  47. <span class="token selector">.border-image-1px</span> <span class="token punctuation">{</span>
    48. 

  48.     <span class="token property">border-bottom</span><span class="token punctuation">:</span> 1px solid #666<span class="token punctuation">;</span>
    49. 

  49. <span class="token punctuation">}</span>
    50. 

  50. <span class="token atrule"><span class="token rule">@media</span> only screen and <span class="token punctuation">(</span><span class="token property">-webkit-min-device-pixel-ratio</span><span class="token punctuation">:</span> 2<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>
    51. 

  51.     <span class="token selector">.border-image-1px</span> <span class="token punctuation">{</span>
    52. 

  52.         <span class="token property">border-bottom</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
    53. 

  53.         <span class="token property">border-width</span><span class="token punctuation">:</span> 0 0 1px 0<span class="token punctuation">;</span>
    54. 

  54.         <span class="token property">-webkit-border-image</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>../img/linenew.png<span class="token punctuation">)</span></span> 0 0 2 0 stretch<span class="token punctuation">;</span>
    55. 

  55.         <span class="token property">border-image</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>../img/linenew.png<span class="token punctuation">)</span></span> 0 0 2 0 stretch<span class="token punctuation">;</span>
    56. 

  56.     <span class="token punctuation">}</span>
    57. 

  57. <span class="token punctuation">}</span>
    58. 

  58. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br></div></div><h3 id="使用-background-image-实现"><a href="#使用-background-image-实现" class="header-anchor">#</a> 使用 background-image 实现</h3> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.background-image-1px</span> <span class="token punctuation">{</span>
    59. 

  59.     <span class="token property">background</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>../img/line.png<span class="token punctuation">)</span></span> repeat-x left bottom<span class="token punctuation">;</span>
    60. 

  60.     <span class="token property">-webkit-background-size</span><span class="token punctuation">:</span> 100% 1px<span class="token punctuation">;</span>
    61. 

  61.     <span class="token property">background-size</span><span class="token punctuation">:</span> 100% 1px<span class="token punctuation">;</span>
    62. 

  62. <span class="token punctuation">}</span>
    63. 

  63. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h3 id="多背景渐变实现"><a href="#多背景渐变实现" class="header-anchor">#</a> 多背景渐变实现</h3> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.background-gradient-1px</span> <span class="token punctuation">{</span>
    64. 

  64.     <span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">linear-gradient</span><span class="token punctuation">(</span>180deg<span class="token punctuation">,</span> black<span class="token punctuation">,</span> black 50%<span class="token punctuation">,</span> transparent 50%<span class="token punctuation">)</span> top left /
    65. 

  65.             100% 1px no-repeat<span class="token punctuation">,</span> <span class="token function">linear-gradient</span><span class="token punctuation">(</span>
    66. 

  66.                 90deg<span class="token punctuation">,</span>
    67. 

  67.                 black<span class="token punctuation">,</span>
    68. 

  68.                 black 50%<span class="token punctuation">,</span>
    69. 

  69.                 transparent 50%
    70. 

  70.             <span class="token punctuation">)</span> top right / 1px 100% no-repeat<span class="token punctuation">,</span>
    71. 

  71.         <span class="token function">linear-gradient</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> black<span class="token punctuation">,</span> black 50%<span class="token punctuation">,</span> transparent 50%<span class="token punctuation">)</span> bottom right / 100%
    72. 

  72.             1px no-repeat<span class="token punctuation">,</span> <span class="token function">linear-gradient</span><span class="token punctuation">(</span>
    73. 

  73.                 -90deg<span class="token punctuation">,</span>
    74. 

  74.                 black<span class="token punctuation">,</span>
    75. 

  75.                 black 50%<span class="token punctuation">,</span>
    76. 

  76.                 transparent 50%
    77. 

  77.             <span class="token punctuation">)</span> bottom left / 1px 100% no-repeat<span class="token punctuation">;</span>
    78. 

  78. <span class="token punctuation">}</span>
    79. 

  79. <span class="token comment">/* 或者 */</span>
    80. 

  80. <span class="token selector">.background-gradient-1px</span> <span class="token punctuation">{</span>
    81. 

  81.     <span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">-webkit-gradient</span><span class="token punctuation">(</span>
    82. 

  82.             linear<span class="token punctuation">,</span>
    83. 

  83.             left top<span class="token punctuation">,</span>
    84. 

  84.             left bottom<span class="token punctuation">,</span>
    85. 

  85.             <span class="token function">color-stop</span><span class="token punctuation">(</span>0.5<span class="token punctuation">,</span> transparent<span class="token punctuation">)</span><span class="token punctuation">,</span>
    86. 

  86.             <span class="token function">color-stop</span><span class="token punctuation">(</span>0.5<span class="token punctuation">,</span> #c8c7cc<span class="token punctuation">)</span><span class="token punctuation">,</span>
    87. 

  87.             <span class="token function">to</span><span class="token punctuation">(</span>#c8c7cc<span class="token punctuation">)</span>
    88. 

  88.         <span class="token punctuation">)</span> left bottom repeat-x<span class="token punctuation">;</span>
    89. 

  89.     <span class="token property">background-size</span><span class="token punctuation">:</span> 100% 1px<span class="token punctuation">;</span>
    90. 

  90. <span class="token punctuation">}</span>
    91. 

  91. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br></div></div><h3 id="使用-box-shadow-模拟边框"><a href="#使用-box-shadow-模拟边框" class="header-anchor">#</a> 使用 box-shadow 模拟边框</h3> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.box-shadow-1px</span> <span class="token punctuation">{</span>
    92. 

  92.     <span class="token property">box-shadow</span><span class="token punctuation">:</span> inset 0px -1px 1px -1px #c8c7cc<span class="token punctuation">;</span>
    93. 

  93. <span class="token punctuation">}</span>
    94. 

  94. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="viewport-rem-实现"><a href="#viewport-rem-实现" class="header-anchor">#</a> viewport + rem 实现</h3> <p>同时通过设置对应 viewport 的 rem 基准值，这种方式就可以像以前一样轻松愉快的写 1px 了。在 devicePixelRatio = 2 时，输出 viewport：</p> <div class="language- line-numbers-mode"><pre class="language-text"><code>在devicePixelRatio = 3 时，输出viewport：
    95. 

  95. ```html
    96. 

  96. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>这种兼容方案相对比较完美，适合新的项目，老的项目修改成本过大。对于这种方案，可以看看《使用 Flexible 实现手淘 H5 页面的终端适配》</p> <h3 id="伪类-transform-实现"><a href="#伪类-transform-实现" class="header-anchor">#</a> 伪类 + transform 实现</h3> <p>单条 border 样式设置：</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.scale-1px</span> <span class="token punctuation">{</span>
    97. 

  97.     <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
    98. 

  98.     <span class="token property">border</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
    99. 

  99. <span class="token punctuation">}</span>
    100. 

  100. <span class="token selector">.scale-1px:after</span> <span class="token punctuation">{</span>
    101. 

  101.     <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">&quot;&quot;</span><span class="token punctuation">;</span>
    102. 

  102.     <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
    103. 

  103.     <span class="token property">bottom</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
    104. 

  104.     <span class="token property">background</span><span class="token punctuation">:</span> #000<span class="token punctuation">;</span>
    105. 

  105.     <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
    106. 

  106.     <span class="token property">height</span><span class="token punctuation">:</span> 1px<span class="token punctuation">;</span>
    107. 

  107.     <span class="token property">-webkit-transform</span><span class="token punctuation">:</span> <span class="token function">scaleY</span><span class="token punctuation">(</span>0.5<span class="token punctuation">)</span><span class="token punctuation">;</span>
    108. 

  108.     <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">scaleY</span><span class="token punctuation">(</span>0.5<span class="token punctuation">)</span><span class="token punctuation">;</span>
    109. 

  109.     <span class="token property">-webkit-transform-origin</span><span class="token punctuation">:</span> 0 0<span class="token punctuation">;</span>
    110. 

  110.     <span class="token property">transform-origin</span><span class="token punctuation">:</span> 0 0<span class="token punctuation">;</span>
    111. 

  111. <span class="token punctuation">}</span>
    112. 

  112. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><p>四条 boder 样式设置:</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.scale-1px</span> <span class="token punctuation">{</span>
    113. 

  113.     <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
    114. 

  114.     <span class="token property">margin-bottom</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span>
    115. 

  115.     <span class="token property">border</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
    116. 

  116. <span class="token punctuation">}</span>
    117. 

  117. <span class="token selector">.scale-1px:after</span> <span class="token punctuation">{</span>
    118. 

  118.     <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">&quot;&quot;</span><span class="token punctuation">;</span>
    119. 

  119.     <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
    120. 

  120.     <span class="token property">top</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
    121. 

  121.     <span class="token property">left</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
    122. 

  122.     <span class="token property">border</span><span class="token punctuation">:</span> 1px solid #000<span class="token punctuation">;</span>
    123. 

  123.     <span class="token property">-webkit-box-sizing</span><span class="token punctuation">:</span> border-box<span class="token punctuation">;</span>
    124. 

  124.     <span class="token property">box-sizing</span><span class="token punctuation">:</span> border-box<span class="token punctuation">;</span>
    125. 

  125.     <span class="token property">width</span><span class="token punctuation">:</span> 200%<span class="token punctuation">;</span>
    126. 

  126.     <span class="token property">height</span><span class="token punctuation">:</span> 200%<span class="token punctuation">;</span>
    127. 

  127.     <span class="token property">-webkit-transform</span><span class="token punctuation">:</span> <span class="token function">scale</span><span class="token punctuation">(</span>0.5<span class="token punctuation">)</span><span class="token punctuation">;</span>
    128. 

  128.     <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">scale</span><span class="token punctuation">(</span>0.5<span class="token punctuation">)</span><span class="token punctuation">;</span>
    129. 

  129.     <span class="token property">-webkit-transform-origin</span><span class="token punctuation">:</span> left top<span class="token punctuation">;</span>
    130. 

  130.     <span class="token property">transform-origin</span><span class="token punctuation">:</span> left top<span class="token punctuation">;</span>
    131. 

  131. <span class="token punctuation">}</span>
    132. 

  132. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">if</span> <span class="token punctuation">(</span>window<span class="token punctuation">.</span>devicePixelRatio <span class="token operator">&amp;&amp;</span> devicePixelRatio <span class="token operator">&gt;=</span> <span class="token number">2</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    133. 

  133.     document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">&quot;ul&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span>className <span class="token operator">=</span> <span class="token string">&quot;scale-1px&quot;</span><span class="token punctuation">;</span>
    134. 

  134. <span class="token punctuation">}</span>
    135. 

  135. </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><div id="vcomments"></div></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">Last Updated:</span> <span class="time">11/4/2019, 1:24:26 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
    136. 

  136.       ←
    137. 

  137.       <a href="/CSS/cases.html" class="prev">案例收集</a></span> <span class="next"><a href="/CSS/2018_10_21_02.html">border-style</a>
    138. 

  138.       →
    139. 

  139.     </span></p></div> </main></div><div class="global-ui"></div></div>
    140. 

  140.     <script src="/assets/js/app.268f9f67.js" defer></script><script src="/assets/js/3.515b53d6.js" defer></script><script src="/assets/js/64.eb8d2554.js" defer></script><script src="/assets/js/61.dc32bd44.js" defer></script>
    141. 

  141.   </body>
    142. 

  142. </html>
    143.