转：

android上实现0.5px线条

由于安卓手机无法识别border: 0.5px，因此我们要用0.5px的话必须要借助css3中的-webkit-transform:scale缩放来实现。

原理：将伪元素的宽设为200%，height设为1px通过-webkit-transform:scale（.5）来进行缩小一倍，这样就得到border为0.5的边框



    Document

    .div { width: 100%; height: 100px; border-top: 1px solid rgba(0, 255, 255, 1); posititon: relative }

.div::after { content: ""; position: absolute; left: 0; bottom: 0; box-sizing: border-box; width: 200%; height: 1px; transform: scale(0.5); transform-origin: left top; pointer-events: none; background-color: rgba(0, 255, 255, 1) }



Copy to clipboardErrorCopied

效果展示：

转：

android上实现0.5px线条

android上实现0.5px线条的更多相关文章

  1. 怎么画一条0.5px的边

    编者按:本文由人人网FED发表于掘金,并已授权奇舞周刊转载 什么是像素? 像素是屏幕显示最小的单位,在一个1080p的屏幕上,它的像素数量是1920 1080,即横边有1920个像素,而竖边为1080 ...

  2. 对0.5px的边的研究--------------引用

    什么是像素? 像素是屏幕显示最小的单位,在一个1080p的屏幕上,它的像素数量是1920 1080,即横边有1920个像素,而竖边为1080个.一个像素就是一个单位色块,是由rgba四个通道混合而成. ...

  3. opencv3.0 在 android 上的使用

    下载 OpenCV-3.0.0-android-sdk-1.zip 打开 intellj,新建立一个 android 工程后选择工程属性,导入模块(Import module from externa ...

  4. Android上使用OpenGLES2.0显示YUV数据

    在Android上用OpenGLES来显示YUV图像,之所以这样做,是因为: 1.Android本身也不能直接显示YUV图像,YUV转成RGB还是必要的: 2.YUV手动转RGB会占用大量的CPU资源 ...

  5. 在Android上编译OSG[3.0.2 ] (转)

    在Android上编译OSG[3.0.2 ] 分类:Android   This file contents can be applied for version OpenSceneGraph(OSG ...

  6. 怎么在高清屏上画一条0.5px的边

    怎么在高清屏上画一条0.5px的边呢?0.5px相当于高清屏物理像素的1px.这样的目的是在高清屏上看起来会更细一点,效果会更好一点,例如更细的分隔线. 理论上px的最小单位是1,但是会有几个特例,高 ...

  7. 如何实现border-width:0.5px;

    工作中遇到了一个产品需求,要求把列表分割线改成0.5px,直接写成border:0.5px solid #cccccc;是不符合规范的写法,会存在Android和IOS手机上的兼容问题,故,我们可以利 ...

  8. 移动端 Retina屏border实现0.5px

    首先来看一下造成Retina边框变粗的原因 其实这个原因很简单,因为css中的1px并不等于移动设备的1px,这些由于不同的手机有不同的像素密度.在window对象中有一个devicePixelRat ...

  9. CSS 0.5px 细线边框的原理和实现方式

    细线边框的具体实现方法有:伪元素缩放或渐变,box-shadow模拟,svg画线,border-image裁剪等.要实现小于1px的线条,有个先决条件:屏幕的分辨率要足够高,设备像素比要大于1,即cs ...

随机推荐

  1. o2,o3优化

    #pragma GCC optimize(2)//O2优化 #pragma GCC optimize(3,"Ofast","inline")//O3优化

  2. Codeforces Round #696 (Div. 2) C. Array Destruction (贪心,multiset)

    题意:有\(n\)个数,首先任选一个正整数\(x\),然后在数组中找到两个和为\(x\)的数,然后去掉这两个数,\(x\)更新为两个数中较大的那个.问你最后时候能把所有数都去掉,如果能,输出最初的\( ...

  3. POJ 3189

    题意: 给你B个谷仓和n头牛,每个谷仓最多容纳m头牛.此时每头牛对每一个谷仓都有一个喜悦值,你需要把每一头牛都安排某个谷仓内,并且找出来那个每一头牛对它所住的谷仓打的分值,我们对这所有的分值取一个区间 ...

  4. IDE - vscode

    [一]VSCODE官方插件库 https://marketplace.visualstudio.com/ 最好能在文件->首选项->设置中,搜索update,将Auto Update关闭, ...

  5. spring再学习之AOP实操

    一.spring导包 2.目标对象 public class UserServiceImpl implements UserService { @Override public void save() ...

  6. spring再学习之配置详解

    applicationContext.xml文件配置: bean元素: <?xml version="1.0" encoding="UTF-8"?> ...

  7. python 3.7 利用socket文件传输

    参考:https://www.cnblogs.com/VseYoung/p/socket_1.html 参考 https://blog.csdn.net/a19990412/article/detai ...

  8. 浅谈WEB前端规范化标准之ESlint

    规范化标准 软件开发需要多人开发,不同的开发者具有不同的编码习惯和喜好,不同的喜好增加项目的维护成本,所以需要明确统一的标准,决定 了项目的可维护性,人为的约定不可靠,所以需要专门的工具进行约束,并且 ...

  9. Pycharm缺少环境变量+无法获取libcudnn.so.6

    在终端输入: echo LD_LIBRARY_PATH, 并将其内容 添加至Pycharm的 run -> Edit configuration -> Environment variab ...

  10. 为什么 Koa 的官方文档那么丑呀？

    为什么 Koa 的官方文档那么丑呀? koa.js https://koajs.com/ 代码高亮 # $ nvm install 7, node.js v7.x.x+ $ yarn add koa ...