如何画一条0.5px的直线

485 阅读1分钟
<style type="text/css">

        * {

            margin: 0;

            padding: 0;

        }

        /* 背景 */

       

        section {

            position: relative;

            width: 500px;

            height: 300px;

            background: #ccc;

            margin: 100px auto;

        }

        /*参考线*/

       

        .sol {

            position: absolute;

            height: 1px;

            width: 200px;

            margin-top: 40px;

            margin-left: 100px;

            background-color: rgb(38, 255, 0);

        }

        /*缩放 */

       

        .outer {

            position: absolute;

            margin-top: 60px;

            margin-left: 100px;

            height: 1px;

            width: 200px;

            background-color: red;

            transform: scaleY(0.5);

            transform-origin: 50% 100%;

        }

        /* 默认缩放是从中点开始的,所以要改变缩放的位置 */

        /*box-shadow*/

       

        .aa {

            position: absolute;

            margin-top: 80px;

            margin-left: 100px;

            width: 200px;

            background: #000;

        }

       

        .bs {

            height: 1px;

            background: none;

            box-shadow: 0 0.5px 0 yellow;

        }

        /*线性渐变*/

       

        .bb {

            position: absolute;

            margin-top: 100px;

            margin-left: 100px;

            width: 200px;

            height: 1px;

        }

       

        .lin {

            background: linear-gradient(0deg, #000, transparent 50%);

        }

        /* border 设置上边框 */

       

        .cc {

            position: absolute;

            margin-top: 120px;

            margin-left: 100px;

            width: 200px;

            background: none;

        }

       

        .bo {

            border-top: 0.5px solid blue;

        }

        /* svg文件描边 */

       

        .dd {

            position: absolute;

            margin-top: 140px;

            margin-left: 100px;

        }

       

        .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='orange' x='0' y='0' width='1' height='0.5'/></svg>");

            height: 1px;

            width: 200px;

        }

    </style>

</head>

\


<body>

    <section>

        <!-- 参考线 -->

        <div class="sol"></div>

        <!-- 利用 transform缩放-->

        <div class="outer"></div>

        <!-- 利用box-shadow: 设置box-shadow的第二个参数为0.5px,表示阴影垂直方向的偏移为0.5px -->

        <!-- 这个方法在谷歌和火狐都非常完美,但是苹果不支持小于1px的boxshadow,所以完全没显示出来。 -->

        <div class="bs  aa"></div>

        <!-- 利用线性渐变  渐变角度从下往上 从黑渐变到到透明色 达成看起来0.5px直线的效果-->

        <div class="lin bb"></div>

        <!-- 设置上边框 背景无  不适合谷歌浏览器-->

        <div class="bo cc"></div>

        <!-- svg文件  使用svg的rect元素画线  fill表示颜色   svg描边属性的1px -->

        <div class="svg dd"></div>

    </section>

    <!--

    x1 属性在 x 轴定义线条的开始

    y1 属性在 y 轴定义线条的开始

    x2 属性在 x 轴定义线条的结束

    y2 属性在 y 轴定义线条的结束

 -->

</body>

效果如下:

13020.png