转：

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. codeforces628D. Magic Numbers (数位dp)

    Consider the decimal presentation of an integer. Let's call a number d-magic if digit d appears in d ...

  2. P1439 【模板】最长公共子序列（DP）

    题目描述 给出1-n的两个排列P1和P2,求它们的最长公共子序列. 输入输出格式 输入格式: 第一行是一个数n, 接下来两行,每行为n个数,为自然数1-n的一个排列. 输出格式: 一个数,即最长公共子 ...

  3. 洛谷 P3385 【模板】负环 (SPFA)

    题意:有一个\(n\)个点的有向图,从\(1\)出发,问是否有负环. 题解:我们可以用SPFA来进行判断,在更新边的时候,同时更新路径的边数,因为假如有负环的话,SPFA这个过程一定会无限重复的遍历这 ...

  4. 在kubernetes集群里集成Apollo配置中心(3)之交付Apollo-portal至Kubernetes集群

    1.执行apollo-portal数据库脚本 apollo-portal数据库脚本链接:https://raw.githubusercontent.com/ctripcorp/apollo/1.5.1 ...

  5. kubeadm---高可用安装

    1.修改主机名 如何使用hostnamectl set-hostname name来为每台主机设置不同的机器名 #hostnamectl set-hostname k8s-master01 或者使用以 ...

  6. kubernetes进阶（六）k8s平滑升级

    当我们遇到K8S有漏洞的时候,或者为了满足需求,有时候可能会需要升级或者降级版本, 为了减少对业务的影响,尽量选择在业务低谷的时候来升级: 首先准备好文件:我这里选择的是内网文件服务器上下载的,请自行 ...

  7. LINUX - 随机数

    #include <stdio.h> #include <stdlib.h> #include <pthread.h> #include <unistd.h& ...

  8. JavaScript var, let, const difference All In One

    JavaScript var, let, const difference All In One js var, let, const 区别 All In One 是否存在 hoisting var ...

  9. vscode & javascript & react & "editor.foldingStrategy": "indentation"

    vscode & javascript & react & "editor.foldingStrategy": "indentation" ...

  10. queueMicrotask & EventLoop & macrotask & microtask

    queueMicrotask https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/queueMicro ...