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. 浅谈Linux系统中如何查看进程

    进程是一个其中运行着一个或多个线程的地址空间和这些线程所需要的系统资源.一般来说,Linux系统会在进程之间共享程序代码和系统函数库,所以在任何时刻内存中都只有代码的一份拷贝. 1,ps命令 作用:p ...

  2. UNIX环境编程学习笔记（2）——文件I/O之不带缓冲的 I/O

    lienhua342014-08-25 1 文件描述符 对于内核而言,所有打开的文件都通过文件描述符引用.文件描述符是一个非负整数.当打开一个现有文件或创建一个新文件时,内核向进程返回一个文件描述符. ...

  3. JIRA 初体验

    JIRA 使用神奇的JQL查询数据,很nice啊 ! 官网API:   https://docs.atlassian.com/jira/REST/latest/#d2e2344 测试一下search: ...

  4. matplotlib使用GridSpec调整子图位置大小 （非对称的子图）

    用matplotlib.pyplot的subplots命令可以很方便的画对称的子图,但是如果要画非对称的子图(如下)就需要用GridSpec命令来控制子图的位置和大小: 而上图的结构可以用一下两种方式 ...

  5. Batch Normalization 学习笔记

    原文:http://blog.csdn.net/happynear/article/details/44238541 今年过年之前,MSRA和Google相继在ImagenNet图像识别数据集上报告他 ...

  6. Dubbo调用链（version：2.5.3）

    Consumer 调用 Provider的过程: (CONSUMER)Dubbo服务调用处 --> 调用RPC代理 --> InvokerInvocationHandler#invoke( ...

  7. VB2008新特性

    1.扩展方法 (Extension Methods) 给Person类扩展Print方法 Public Module PersonExtension <System.Runtime.Compil ...

  8. Cookie 和 Session机制具体解释

    原文地址:http://blog.csdn.net/fangaoxin/article/details/6952954     会话(Session)跟踪是Web程序中经常使用的技术,用来跟踪用户的整 ...

  9. C#调用外部DLL介绍及使用详解

    一.      DLL与应用程序 动态链接库(也称为DLL,即为“Dynamic Link Library”的缩写)是Microsoft Windows最重要的组成要素之一,打开Windows系统文件 ...

  10. 《NodeJs开发指南》第五章微博开发实例的中文乱码问题

    在<NodeJs开发指南>第五章,按照书中的要求写好微博实例后,运行代码,发现中文显示出现乱码,原因是:views文件夹下的ejs文件的编码格式不是utf-8. 解决方法:以记事本方式打开 ...