android上實現(xiàn)0.5px線條的原理分析
由于安卓手機無法識別border: 0.5px，因此我們要用0.5px的話必須要借助css3中的-webkit-transform:scale縮放來實現(xiàn)。
原理：將偽元素的寬設(shè)為200%，height設(shè)為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>
效果展示：
到此這篇關(guān)于android上實現(xiàn)0.5px線條的原理分析的文章就介紹到這了,更多相關(guān)android實現(xiàn)0.5px線條內(nèi)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！
相關(guān)文章：
網(wǎng)公網(wǎng)安備