1.scale方法

{

  height: 1px;

  transform: scaleY(0.5);

  transform-origin: 50% 100%; // 要指定origin值, 要不然会模糊

  content: "";

  position: absolute;

  width: 100%;

  left: 0;

  bottom: 0;

  background: red;

}

　　

2.线性渐变linear-gradient, 流览器上面都不完美，效果都是虚的，和完美的0.5px还是有差距

3.使用boxshadow

4.使用SVG

二.几种效果

<!DOCType html>

<html>

<head>

    <meta charset="utf-8">

    <style>

        .hr {

            width: 300px;

            background-color: #000;

        }

        .hr.half-px {

            height: 0.5px;

        }

        .hr.one-px {

           height: 1px;

        }

        .hr.scale-half {

            height: 1px;

            transform: scaleY(0.5);

            transform-origin: 50% 100%;

        }

        .hr.gradient {

            height: 1px;

            background: linear-gradient(0deg, #ccc, #000);

        }

        .hr.boxshadow {

            height: 1px;

            border-radius: 50px;

            background: none;

            box-shadow: 0 0.5px 0 #000;

        }

.hr.svg {

    background: none;

    height: 1px;

    /*background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1' height='1'><rect fill='red' x='0' y='0' width='1' height='0.5'/></svg>");*/

    background: repeat-x top left url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1' height='1'><rect fill='red' x='0' y='0' width='1' height='0.5'/></svg>");

    background: repeat-x top left url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1' height='1'><rect x='0' y='0' width='1' height='0.5' fill='#cccccc'></rect></svg>");

    background: url("data:image/svg+xml;utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1px'><line x1='0' y1='0' x2='100%' y2='0' stroke='#000'></line></svg>");

    background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMDAlJyBoZWlnaHQ9JzFweCc+PGxpbmUgeDE9JzAnIHkxPScwJyB4Mj0nMTAwJScgeTI9JzAnIHN0cm9rZT0nIzAwMCc+PC9saW5lPjwvc3ZnPg==");

}

    </style>

    <meta name="viewport" content="width=device-width">

</head>

<body>

    <p>svg</p>

    <div class="hr svg"></div>

    <p>box-shadow: 0 0.5px 0 #000</p>

    <div class="hr boxshadow"></div>

    <p>linear-gradient(0deg, #fff, #000)</p>

    <div class="hr gradient"></div>

    <p>1px + scaleY(0.5)</p>

    <div class="hr scale-half"></div>

    <p>0.5px</p>

    <div class="hr half-px"></div>

    <p>1px</p>

    <div class="hr one-px"></div>

<script>

let div = document.createElement("div");

div.style.height = "0.5px";

//document.body.appendChild(div);

console.log(div.clientHeight);

div.style.boxShadow = "0 0.5px 0 #000";

console.log(div.style.boxShadow);

</script>

</body>

</html>

原址: https://juejin.im/post/5ab65f40f265da2384408a95

三. 画4条边的1像素, 可圆角

用::after设置border：1px solid #000; width:200%; height:200%,然后再缩放scaleY(0.5); 优点可以实现圆角，京东就是这么实现的，缺点是按钮添加active比较麻烦。

.div::after {

    content: '';

    width: 200%;

    height: 200%;

    position: absolute;

    top: 0;

    left: 0;

    border: 1px solid #bfbfbf;

    border-radius: 4px;

    -webkit-transform: scale(0.5,0.5);

    transform: scale(0.5,0.5);

    -webkit-transform-origin: top left;

}

画一条0.5px的边的更多相关文章

  1. 怎么画一条0.5px的边

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

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

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

  3. 画一条0.5px的线

    通过伪类元素:after为其添加样式,用transform:scaleY令其在垂直方向缩小0.5倍 .div:after{ height: 1px; transform: scaleY(0.5); t ...

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

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

  5. CSS画0.5px的线

    今天遇到一个需求,画0.5px的线,查了以下资料,主要以scale方法为主.代码如下: /*0.5px上边框*/ .half_top_border_before:before{ content: &q ...

  6. Canvas中如何画一条清晰的线宽为奇数（如1px逻辑像素）的线?

    我在开发中使用canvas的机会不是很多,但是第一次实际使用中就遇到了问题,"很久很久以前,我自己画了一个雷达图,线宽都是1像素,但是显示效果不如期望,这才发现canvas中的画线还是有坑的 ...

  7. 边框0.5px的实现方法

    原理: css3 的缩放   ---->    transform: scale() 完整代码如下: <!DOCTYPE html> <html lang="en&q ...

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

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

  9. 根据多个点使用canvas贝赛尔曲线画一条平滑的曲线

    众所周知想用canvas画一条曲线我们可以使用这些函数: 二次曲线:quadraticCurveTo(cp1x, cp1y, x, y) 贝塞尔曲线:bezierCurveTo(cp1x, cp1y, ...

随机推荐

  1. max导出模型插件

    首先,需要做好如下的准备工作:1. 安装一个完整版本的3D MAX与Visual Stdio.我安装的是3D MAX 2012,最好是找一个完整的版本,因为完整的版本中有很多的学习资料与sdk供学习, ...

  2. AsmTools

    前言 https://wiki.openjdk.java.net/display/CodeTools/asmtools 在OpenJDK里有一个AsmTools项目,用来生成正确的或者不正确的java ...

  3. 【RespberryPi】数码管

    http://blog.mangolovecarrot.net/2015/06/03/raspi-study0801/ 应该可以用两块74HC595来驱动显示8位数的数码管.

  4. EF跨库查询，DataBaseFirst下的解决方案

    出于各种原因,有时需要跨数据库访问某些数据表,有同学已经给出了解决方案,比如  http://blog.csdn.net/hanjun0612/article/details/50475800 已经解 ...

  5. 中企ITIL需软落地

    IT技术的发展对现代企业产生了深远的影响.企业信息化建设越深入,信息系统的规模越大,业务对IT系统的依赖性也越大,由此对IT服务的要求越高,如何 对繁多的IT技术进行有效的管理,最大程度地利用企业现有 ...

  6. windows2008 使用nginx 反向代理实现负载均衡解决HTTPS 证书问题

    由于项目需要 负载均衡由NBL 转成nginx 反向代理.考虑都是https模块,所以证书成了个难题. 解决方案: 1.下载openssl(windows 安装包) 2.打开bin/下面的openss ...

  7. JVM垃圾回收机制之引用类型

    一:引用的类型 javac编译器编译源文件后,生成字节码文件,在类加载器加载字节码文件到内存中时,在内存中开辟 空间,栈.堆以及方法区,来存放对象以及引用.引用可以分为四种: 强引用:平常我们在编写程 ...

  8. 一道简单的把ArrayList中的正负数组分开并求得边界索引的题目

    给定一个List,里面存放的一组整数有正数和负数,要求把正数和负数分开,并得到正数和负数分割线索引(不要求排序,不能使用多层循环) 解答方法并不算太复杂,重点注意边界条件和极端条件(全是正或者全是负) ...

  9. Java重定向输出流实现程序日志

    创建一个类,在该类的main主方法中,保存System类的out成员变量为临时变量,然后创建一个新的文件输出流,并把这个输出流设置为System类新的输出流.在程序关键位置输出调试信息,这些调试信息将 ...

  10. 【SVN】自动定时更新

    程序或脚本:"C:\Program Files\TortoiseSVN\bin\svn.exe" 参数:update E:\XXXXProjects\Code 参考:https:/ ...