<div class='thin-border'></div>

.thin-border {

position: relative;

width: 40px;

height: 20px;

}

.thin-border::after {

content: ' ';

position: absolute;

left: 0;

top: 0;

border: '1px solid #000';

border-radius: 4px;

box-sizing: border-box;

width: 200%;

height: 200%;

transform: scale(.5);

transform-origin: left top;

}

在使用前可以先增加 window.devicePixelRatio && window.devicePixelRatio >= 2 的判断，建议像素比在 2 及已上时使用

0.5px border 实现方案的更多相关文章

  1. 移动端页面0.5px border的实现

    移动端上经常发现1px边框异常的粗,因此,决定用伪类配合css3来实现0.5px边框 代码如下: <!doctype html> <html lang="en"& ...

  2. 实现0.5px边框线

    实现0.5px边框方法 方案一:利用渐变(原理:高度1px,背景渐变,一半有颜色,一半透明) CSS部分 .container { width: 500px; margin: 0px auto; } ...

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

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

  4. 移动端安卓手机不能识别border 0.5px解决方案

    由于安卓手机无法识别border 0.5px,因此我们要用0.5px的话必须要借助css3中的-webkit-transform:scale缩放来实现, 原理:将伪元素的宽设为200%,height设 ...

  5. hairline！ios实现边框0.5px

    在2014WWDC上,Ted O’Connor提出了“retina hairlines”的解决方案,即在ratina屏幕上可以显示0.5px宽度的边框.他的方案是这样的: 1 Standard bor ...

  6. CSS3实现0.5px的边框

    前端页面细节处理好了才会显得精致.边框在网页中是常见的一种样式了.虽然不把它处理为0.5px看上去没毛病,但是想让你做的东西征服更多的人,这些细节处理是必须的. 今天主要说一下如何让边框显示0.5px ...

  7. 怎么画一条0.5px的边

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

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

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

  9. css写出0.5px边框（一）

    在移动端会出现线条太粗的现象,简单来说,是因为手机端的像素单位和ui的图比例是2:1,所以ui图的1px边框对我们来说就是0.5px,但是浏览器渲染的最小单位就是1px,下面给几种方法用css写出0. ...

随机推荐

  1. 组合，Mixin，类、类对象、实例对象

    1.组合,将几个横向关系的组合在一起.所谓的组合就是将类的实例化放到新类里面,那么就将旧类组合进去了. class Turtle: def __init__(self, x): # 注意 init 前 ...

  2. 分页（pagination）样式表

    ul { list-style: none; padding:; margin:; } .pagination{ display:inline-block; padding-left:; border ...

  3. python学习第四次笔记

    python学习第四次记录 列表list 列表可以存储不同数据类型,而且可以存储大量数据,python的限制是 536870912 个元素,64位python的限制是 1152921504606846 ...

  4. 十分钟搞定 pandas

    原文:http://pandas.pydata.org/pandas-docs/stable/10min.html 译者:ChaoSimple 校对:飞龙 官方网站上<10 Minutes to ...

  5. 牛客网PAT乙级(Basic Level)真题-数字分类 (20)

    题目描述 给定一系列正整数,请按要求对数字进行分类,并输出以下5个数字: A1 = 能被5整除的数字中所有偶数的和: A2 = 将被5除后余1的数字按给出顺序进行交错求和,即计算n1-n2+n3-n4 ...

  6. IOS 生成静态库文件(.a文件)

    http://www.cnblogs.com/lyy-5518/p/5459643.html

  7. Ubuntu文件系统

    (). 关于Linux中的文件: (). 在Linux系统中, 一切都是文件 : 所有数据都是文件,包括设备. (). 最小的数据存储单元也是文件. (). 文件系统: 文件系统就是文件的组织和管理方 ...

  8. DateGridView控件与mysql交互

    private void dgv() { //Ip+端口+数据库名+用户名+密码 string connectStr = "server=127.0.0.1;port=3306;databa ...

  9. Egret_简单的封装方法

    ////////////随机颜色***////////////////////////// private getRdmClr(): number { return (Math.floor(Math. ...

  10. 计算机原码、补码、反码与java移位运算符（<</>>/>>>）

    一.机器值和真值 1.机器值 一个数在计算机中的二进制表示形式,  叫做这个数的机器数.机器数是带符号的,在计算机用一个数的最高位存放符号, 正数为0, 负数为1. 比如,十进制中的数 +3 ,计算机 ...