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. git 出错 bad index file sha1 signature

    error: bad index file sha1 signature fatal: index file corrupt 解决方法:使用git命令执行: $ rm -f .git/index $ ...

  2. 使用 ML Pipeline 构建机器学习工作流

    http://www.ibm.com/developerworks/cn/opensource/os-cn-spark-practice5/

  3. 基于HBase Hadoop 分布式集群环境下的MapReduce程序开发

    HBase分布式集群环境搭建成功后,连续4.5天实验客户端Map/Reduce程序开发,这方面的代码网上多得是,写个测试代码非常容易,可是真正运行起来可说是历经挫折.下面就是我最终调通并让程序在集群上 ...

  4. 获取 SharpSvn 执行 svn 操作的实时日志

    1 获取 SharpSvn 操作日志的方式 之前一篇随笔(使用 SharpSvn 执行 svn 操作)讲到可以通过声称一个绑定到一个 SvnClient 对象的 SvnClientReport 对象. ...

  5. Node.js之操作Mongodb

    // mongoose 链接 var mongoose = require('mongoose'); var db = mongoose.createConnection('mongodb://127 ...

  6. sql server 2005 怎么看是不是企业版

    已经安装了SQL server 2005 怎么确定它是企业版 还是标准版??? 执行sql:SELECT @@VERSION在结果里看,比如我这里是(里面有Enterprise Edition,表示企 ...

  7. Blender 编辑模式

    1.如何进入编辑模式 可直接通过“Tab”快捷键进入编辑模式,或者选择界面底部的下拉列表: 如果想退出编辑模式,可再按下“Tab”键退出. 2.编辑选择 进入编辑状态后,我们可以通过鼠标右键来选择某个 ...

  8. oracle数据库中sql%notfound的用法

    SQL%NOTFOUND 是一个布尔值.与最近的sql语句(update,insert,delete,select)发生交互,当最近的一条sql语句没有涉及任何行的时候,则返回true.否则返回fal ...

  9. [OpenCV] Samples 15: Background Subtraction and Gaussian mixture models

    不错的草稿.但进一步处理是必然的,也是难点所在. Extended: 固定摄像头,采用Gaussian mixture models对背景建模. OpenCV 中实现了两个版本的高斯混合背景/前景分割 ...

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

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