移动端下网页border：1px显示
生活随笔
收集整理的這篇文章主要介紹了
移动端下网页border：1px显示
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
解決這個問題之前首先要了解移動前端開發viewport的概念,自己寫了一篇很粗糙viewport詳解的文章對它有了一個很簡單的理解.這里推薦一篇很詳細的博文<<移動前端開發之viewport的深入理解>>
步入正題直接上代碼解決border：1px的解決辦法
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 6 <title>像素為1px</title> 7 <style type="text/css"> 8 .border{ position: relative; margin-bottom: 20px;} 9 .border:after{ content: ''; display:block; position: absolute; width: 100%; left: 0px; bottom: 0px;height: 1px; background-color: #ccc; -webkit-transform: scaleY(0.5); transform: scaleY(0.5);} 10 11 .border2{background: -webkit-gradient(linear, left top, left bottom, color-stop(.5, transparent), color-stop(.5, #ccc), to(#ccc)) left bottom repeat-x; background-size: 100% 1px; } 12 </style> 13 </head> 14 <body> 15 <div class="border">像素為1px解決方法一</div> 16 17 <div class="border2">像素為1px解決方法二</div> 18 </body> 19 </html>2種方案都是CSS3來解決的.第一種是通過元素進行縮放;第二種是線性漸變的方法,此方法只能在手機上才能看到效果.
轉載于:https://www.cnblogs.com/gzzfans/p/4481230.html
總結
以上是生活随笔為你收集整理的移动端下网页border：1px显示的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 关于Thinkphp3.2版本的分页问题
- 下一篇： hdu 2709 递推