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. 一款纯HTML+CSS+JS富文本编辑器-handyeditor

    官网:http://he.catfish-cms.com/ 修改版本(修改一些BUG和图片上传服务器 点击下载: handyeditor富文本编辑器.zip): 图片上传接口上传类型: Content ...

  2. hql date比较

    补充:相等时用to_char,比较大小(<或>)时用 时间格式(如果不是时间格式可以用to_date) java.util.Date date=new java.util.Date(); ...

  3. 查看cp进度，使用watch

    watch -n 1 -d du -sh dir 每隔1s查看当前目录所占空间大小

  4. koa项目用mongoose与mongodb交互，始终报错FormModel is not defined

    koa项目用mongoose与mongodb交互,始终报错FormModel is not defined,就是自己定义的model实例始终不能找到,但是明明定义了,这时候就要看大小写了,当创建一个m ...

  5. datetimerangepicker配置及默认时间段展示

    <script type="text/javascript"> $(document).ready(function (){ //时间插件 $('#reportrang ...

  6. 8 云计算系列之Horizon的安装与虚拟机创建流程

    preface 在上一章节中,我们可以在无web管理界面上创建并启动虚拟机,虽然可以这么做,但是敲命令太繁琐,所以此时我们可以安装openstack web管理界面,通过web界面的图形化操作open ...

  7. 找不到 android-support-v4 解决办法

    Project->properties->Java Build Path->Libraries->Add External Jars中加入sdk目录下的extras/andro ...

  8. 安装MySQL-python： EnvironmentError:mysql config not found

    1执行 sudo yum install python-devel 2 find / -name mysql_config 在/usr/bin/下发现了这个文件 3. 后修改MySQL-python- ...

  9. 阿里云被挖矿使用，导致cpu长期处于100%，ddgs进程，xWx3T进程,关于redis密码

    1.使用top命令,查看到一个叫xWx3T的进程cpu占用99.8%,由于我的阿里云是单核的,所以最高只能100%. 把它用kill命令杀死后,过一会儿又启动了,又占用100%. 使用ps -ef可以 ...

  10. 海康视频监控---Demo

    1,使用在页面中调用ActiveX控件 <object classid='clsid:E7EF736D-B4E6-4A5A-BA94-732D71107808' codebase='' stan ...