<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. 用indexof来统计字符出现的次数

    代码如下: <!DOCTYPE html> <html lang="en"> <head>     <meta charset=" ...

  2. springboot整合mybatics PLUS

    首先添加maven依赖: <dependency> <groupId>org.mybatis.spring.boot</groupId> <artifactI ...

  3. callback函数

    const getUserInfo = function (callback) { try { let params = { "url": "https://h5.m.t ...

  4. jasperreports+IReport 5.56,集成到Spring MVC4.0案例

    首先,先说一下需求,项目需要打印一些报表,也没多想,直接就在jsp页面设置了样式,前台直接调用window.print()写了打印功能,但是例会的时候,领导提出需要一些比较麻烦的打印,自己写肯定费时间 ...

  5. ASP.NET项目答辩系统课件使用中的问题记录

    使用软件:VS2008 模块一:登录模块 1-08 问题:显示属性“background”不是元素"td"的有效属性 解决:style="background-image ...

  6. 【Spring】文件上传

    一:引入所需jar包 // https://mvnrepository.com/artifact/commons-fileupload/commons-fileuploadcompile group: ...

  7. 如何使用idea给系统平台添加子应用和应用的模块

    1.添加模块smartcity-portal,由于模块是在smartcity-framework工程下的,所以按照图片所示添加 2.smartcity-portal模块添加完成后,由于portal-d ...

  8. projects(好代码好工具)每天进步一点点

    1. 行人检测的,感觉这个代码不错,起码换个数据集测试也不错: https://bitbucket.org/shanshanzhang/code_filteredchannelfeatures 2. ...

  9. unsigned int reverse_bit(unsigned int value);

    /*编写函数 unsigned int reverse_bit(unsigned int value); 这个函数的返回值吧value的二进制位模式从左到右翻转后的值. 如在32位机器上25这个值包含 ...

  10. oracle中left join，right join，inner join的坑

    本文主要是记录一下实际使用oracle中join查询遇到的坑 1.用到两张表,学生表和学年分数表,先建立 2.普通连接查询 INNER JOIN,查询每个学年有成绩的学生以及分数情况 LFET JOI ...