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)文章：
1. 詳解Android studio 動態(tài)fragment的用法2. 編程語言PHP在Web開發(fā)領(lǐng)域的優(yōu)勢在哪？3. Android如何加載Base64編碼格式圖片4. 基于android studio的layout的xml文件的創(chuàng)建方式5. Spring Boot和Thymeleaf整合結(jié)合JPA實現(xiàn)分頁效果(實例代碼)6. 解決Android studio xml界面無法預(yù)覽問題7. 什么是python的自省8. 圖文詳解vue中proto文件的函數(shù)調(diào)用9. Springboot Druid 自定義加密數(shù)據(jù)庫密碼的幾種方案10. Vuex localStorage的具體使用
網(wǎng)公網(wǎng)安備