android上实现0.5px线条的原理分析
更新时间：2021年01月08日 14:39:10 作者：浅夏晴空
这篇文章主要介绍了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线条内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
本篇文章主要介绍了Android 截屏方式整理（总结），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
本篇文章主要介绍了微信小程序-阅读小程序实例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能给你们提供帮助2021-06-06
这篇文章主要介绍了Android中自定义view实现侧滑效果的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-11-11
这篇文章主要介绍了Android 程序执行LINUX命令的解决方法及注意事项,本文通过问题描述最终到解决方法，给大家介绍的非常详细，需要的朋友可以参考下2017-12-12
这篇文章主要介绍了Android中编写简单的手电筒小应用的实例教程,简单粗暴地控制手机闪光灯的开闭,效果拔群XD 需要的朋友可以参考下2016-04-04
Android中检查网络连接状态的变化无网络时跳转到设置界面
这篇文章主要介绍了Android中检查网络连接状态的变化无网络时跳转到设置界面,需要的朋友可以参考下2017-06-06
这篇文章主要介绍了Android Activity向右滑动返回，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-06-06
Android实现EditText控件禁止输入内容的方法(附测试demo)
这篇文章主要介绍了Android实现EditText控件禁止输入内容的方法,涉及Android针对EditText控件属性设置的相关技巧,需要的朋友可以参考下2015-12-12
PackageManger的主要职责是管理应用程序包,通过它可以获取应用程序信息,这篇文章主要给大家介绍了关于Android中PackageManager使用的相关资料,需要的朋友可以参考下2021-11-11
这篇文章主要介绍了Android程序开发之WebView使用总结的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-07-07
最新评论