CSS：画一条 0.5px 的线（****四颗星）

一般用border: 0.5px solid red;但是不同浏览器显示不同，有的浏览器会自动把0.5px转成1px。那么如何实现0.5px的线呢？

1.单边框的0.5px线的实现方法

1.方法1：boder+boder-image+linear-gradient

<style>
        .border {
            width: 200px;
            height: 200px;
            background-color: rgb(136, 255, 0);
            margin: 0 auto;
            border-bottom: 1px solid transparent;
            border-image: linear-gradient(to bottom,transparent 50%,rgb(237, 9, 9) 50%) 0 0 100% 0;
        }
    </style>

<div class="border">

2.方法2：伪元素+position+background-image

<style>
        .border {
            width: 200px;
            height: 200px;
            background-color: rgb(136, 255, 0);
            margin: 0 auto;
            position: relative;
        }
        .border::before{/* 或.border::after都可以 */
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 1px;
            background-image: linear-gradient(to bottom,transparent 50%,rgb(237, 9, 9) 50%);
        }
    </style>

<div class="border"></div>

3.方法3：定位+伪元素+transform缩放（scale）

<style>