在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線條的原理是什么-創新互聯
轉載源于:http://www.yijiale78.com/article32/dodipc.html
成都網站建設公司_創新互聯,為您提供靜態網站、響應式網站、網站制作、電子商務、搜索引擎優化、網站排名
聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯