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

往期css3文章

详解 CSS3中最好用的布局方式——flex弹性布局（看完就会）
CSS3基础属性大全
 CSS3动画属性 animation详解（看完就会）
CSS3 transform 2D转换之移动旋转缩放（详细讲解看完就会）
CSS3 Z—Index 详解
 CSS3 positon定位详解（通俗易懂）

目录

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阴影实现的答案


   
 
<body>
    <div>div>
body>

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


 
 
<body>
    <div>div>
body>

transform 缩放实现的答案


 
<body>
    <div>div>
body>

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


   
 
<body>
    <div>div>
body>

理解

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属性，通过其他属性来达到类似的边框效果，第三种使用了边框然后进行了效果的修改，第四种也有边框效果的变种写法。

相关阅读:
useRef 定义的 ref 在控制台可以打印但是页面不生效？
Hadoop 2.0：主流开源云架构（三）
【Python】使用matplotlib绘制图形（曲线图、条形图、饼图等）
Java线程池和Spring异步处理高级篇
 【Canvas】js用Canvas绘制阴阳太极图动画效果
 第三方支付接口响应超时处理方法【杭州多测师】【杭州多测师_王sir】
LeetCode-813-最大平均值和的分组
 【ACM算法竞赛日常训练】DAY10题解与分析【月月给华华出题】【华华给月月出题】| 筛法 | 欧拉函数 | 数论
 Android.mk 中覆盖应用包名
 canvas绘制马路和屏幕
原文地址：https://blog.csdn.net/m0_62360527/article/details/127082351