画一条0.5px的边

绘制0.5px线条技巧

最新推荐文章于 2024-12-17 22:06:01 发布

转载最新推荐文章于 2024-12-17 22:06:01 发布 · 57 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/alantao/p/8671106.html

本文介绍了几种实现0.5像素线条的方法，包括使用CSS的scale、线性渐变、box-shadow及SVG等技术，并展示了不同效果的示例代码。

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;
}

转载于:https://www.cnblogs.com/alantao/p/8671106.html