目录

​​思路​​

​​            box-shadow阴影实现的思路​​

​​             ::after定位伪类实现的思路​​

​​            transform 缩放实现的思路​​

​​            border-image: linear-gradient 边框线性渐变的思路​​

​​答案​​

​​            box-shadow阴影实现的答案​​

​​           ::after定位伪类实现的答案​​

​​            transform 缩放实现的答案​​

​​            border-image: linear-gradient 边框线性渐变的答案    ​​

​​理解​​

​​            box-shadow阴影实现的理解​​

​​             ::after定位伪类实现的理解​​

​​            transform 缩放实现的理解​​

​​            border-image: linear-gradient 边框线性渐变的理解    ​​

​​总结​​

思路

                首先  直接这样设置

border: 0.5px solid red;

                0.5px的边框，肯定是不对的，边框大小会向上取整。

            box-shadow阴影实现的思路

                      既然border不能设置小数的边框，那我们能不能找一个属性有相似的效果来替代它呢，当然可以，我们可以用box-shadow属性用阴影达到0.5px的边框效果，box-shadow阴影属性是允许小数值的，我们可以用它达到单条边框和四条边框。

             ::after定位伪类实现的思路

                直接设置伪类元素，设置指定的高度，通过定位来控制位置。

            transform 缩放实现的思路

                        我们可以设置任意大小的边框，改变中心点，通过缩放效果（找好倍率）来达成想要的结果。

            border-image: linear-gradient 边框线性渐变的思路

                         同样设置任意大小的边框，通过渐变属性改变一部分边框的颜色效果，比如将一部分边框融入背景，这样就能得到想要的效果。

答案

                

            box-shadow阴影实现的答案

                     

<style>
        div {
            box-sizing: border-box;
            background-color: blueviolet;
            width: 200px;
            height: 200px;
            margin: 100px auto;
            /* border: 1px solid red; */
            box-shadow: 0px 0px 0px 0.5px green;
        }
    </style>
</head>

<body>
    <div></div>
</body>

           ::after定位伪类实现的答案

                

<style>
        div {
            position: relative;
            box-sizing: border-box;
            background-color: blueviolet;
            width: 200px;
            height: 200px;
            margin-top: 10px;
            /* box-shadow: 0px 0px 0px 0.5px green; */
        }

        div::after {
            position: absolute;
            content: "";
            background-color: red;
            width: 100%;
            height: 0.5px;
            bottom: 0px;
        }
    </style>
</head>

<body>
    <div></div>
</body>

                

[前端CSS高频面试题]如何画0.5px的边框线（详解）_面试

 

            transform 缩放实现的答案

                

<style>
        div {
            position: relative;
            box-sizing: border-box;
            background-color: blueviolet;
            width: 200px;
            height: 200px;
            margin-top: 10px;
            /* box-shadow: 0px 0px 0px 0.5px green; */
        }

        div::after {

            position: absolute;
            content: "";
            width: 200%;
            height: 200%;
            border: 1px solid red;
            transform-origin: 0 0;
            transform: scale(0.5);


        }
    </style>
</head>

<body>
    <div></div>
</body>

                

[前端CSS高频面试题]如何画0.5px的边框线（详解）_前端_02

            border-image: linear-gradient 边框线性渐变的答案    

                  

<style>
        div {
            position: relative;
            box-sizing: border-box;
            background-color: blueviolet;
            width: 200px;
            height: 200px;
            margin-top: 10px;
            /* box-shadow: 0px 0px 0px 0.5px green; */
        }

        div::after {
            display: block;
            position: absolute;
            content: "";
            width: 100%;
            height: 1px;
            bottom: 0px;
            background-color: red;
            background: linear-gradient(to bottom, transparent 50%, red 50%);


        }
    </style>
</head>

<body>
    <div></div>
</body>

[前端CSS高频面试题]如何画0.5px的边框线（详解）_面试_03

理解

            box-shadow阴影实现的理解

                        这种方法完全借助盒子阴影来达到指定效果，通过0.5px的阴影，让它达到类似0.5px边框的效果。

             ::after定位伪类实现的理解

                        这种方法直接设置0.5px的高度，高度同样允许小数px，我们生成了一个新元素，来改变它的高度，让它充当边框。

            transform 缩放实现的理解

                        利用缩放属性，我们设置一个1px边框，长度和宽度设置为被包裹子元素的两倍，当它缩小0.5的时候，就正好变成了子元素的宽高，1px的边框也缩小了一半变成了0.5px

            border-image: linear-gradient 边框线性渐变的理解    

                         这个其实是第二种属性的复杂版了，没有直接设置0.5px，而是设置了1px1上上面一半透明，来达到0.5px的边框效果，我们也可以直接设置1px的边框，然后同样透明0.5px，这个就不演示了。（这个属性有点复杂 后面会讲一下）

总结

                        第一二 四种没有使用border属性，通过其他属性来达到类似的边框效果，第三种使用了边框然后进行了效果的修改，第四种也有边框效果的变种写法。