android上實現0.5px線條的原理分析
由于安卓手機無法識別border: 0.5px，因此我們要用0.5px的話必須要借助css3中的-webkit-transform:scale縮放來實現。
原理：將偽元素的寬設為200%，height設為1px通過-webkit-transform:scale（.5）來進行縮小一倍，這樣就得到border為0.5的邊框
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <meta http-equiv='X-UA-Compatible' content='ie=edge'> <title>Document</title> <style> .div{ width: 100%; height: 100px; border-top: 1px solid aqua; posititon:relative; } .div::after{ content: ’’; position: absolute; left: 0; bottom: 0; box-sizing: border-box; width: 200%; height: 1px; transform: scale(.5); transform-origin: 0 0; pointer-events: none; background-color: aqua; } </style></head><body> <div class='div'></div></body></html>
效果展示：
到此這篇關于android上實現0.5px線條的原理分析的文章就介紹到這了,更多相關android實現0.5px線條內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！
相關文章：
網公網安備