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. Microsoft Word 2010/2013 无法创建工作文件 请检查临时环境变量

    解决方案:重置IE缓存文件夹

  2. Lua string库详解

    1. string库中所有的字符索引从前往后是1,2,...;从后往前是-1,-2,...2. string库中所有的function都不会直接操作字符串,而是返回一个结果 string.byte(s ...

  3. jenkins 忘记admin用户账号密码

    一不小心,忘记了admin用户的账号密码.然后就看不到manage jenkins的那部分内容了,看不到就改不了用户权限,也就是系统瘫痪了. 于是,想着开始没注册账号和密码的时候,都能看见,也就是没有 ...

  4. make screenshot at Eclipse

    In Eclipse, from the Window menu, select Open Perspective > Other... > DDMS. Select the Kindle ...

  5. android手机内的通讯录数据库

    今天看了一下 android手机内的通讯录数据库,简单的汇总了一下. 数据库见附件中的contacts2.db , 里面一共有40个表,34个视图,很庞大,挑几个重点的看一下. 1.表Raw_cont ...

  6. BarTender怎么打印公式化的三列标签

    有小伙伴在业务上有这样的需求:使用BarTender打印一行三列的标签,如下A,B,C三个并排.第一行 A1=a B1=a*2-1 C1=a*2:第二行 A2=a+1 B2=(a+1)*2-1 C2= ...

  7. WebGL 颜色与纹理

    1.纹理坐标 纹理坐标是纹理图像上的坐标,通过纹理坐标可以在纹理图像上获取纹理颜色.WebGL系统中的纹理坐标系统是二维的,如图所示.为了将纹理坐标和广泛使用的x.y坐标区分开来,WebGL使用s和t ...

  8. python字符串 分片索引

    字符串是字符的有序集合,可以通过其位置来获得具体的元素.在python中,字符串中的字符是通过索引来提取的,索引从0开始. python可以取负值,表示从末尾提取,最后一个为-1,倒数第二个为-2,即 ...

  9. InsertSql

    declare @hobby table(hobbyID int,hName nvarchar(100));insert into @hobby(hobbyID,hName)Select 1,'爬山' ...

  10. PHP 源码加密模块 php-beast

    PHP Beast是一个源码加密模块,使用这个模块可以把PHP源码加密并在此模块下运行. 为什么要用PHP-Beast? 有时候我们的代码会放到代理商上, 所以很有可能代码被盗取, 或者我们写了一个商 ...