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线条内容请搜索好吧啦网以前的文章或继续浏览下面的相关文章希望大家以后多多支持好吧啦网！
相关文章：
1. ThinkPHP5 通过ajax插入图片并实时显示(完整代码)2. ASP.NET MVC通过勾选checkbox更改select的内容3. Android实现图片自动切换功能(实例代码详解)4. jsp+mysql实现网页的分页查询5. javascript xml xsl取值及数据修改第1/2页6. 存储于xml中需要的HTML转义代码7. 使用AJAX（包含正则表达式）验证用户登录的步骤8. 解决Python paramiko 模块远程执行ssh 命令 nohup 不生效的问题9. JavaScript Tab菜单实现过程解析10. Python使用oslo.vmware管理ESXI虚拟机的示例参考
网公网安备