CSS 画一条0.5px的线的方法（ 4种 ）

还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；CSDN知名博主，GIS领域优质创作者，深耕openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts等技术开发，欢迎加底部微信（gis-dajianshi），一起交流。

No.	大剑师精品GIS教程推荐
0	地图渲染基础- 【WebGL 教程】 - 【Canvas 教程】 - 【SVG 教程】
1	Openlayers 【入门教程】 - 【源代码+示例 300+】
2	Leaflet 【入门教程】 - 【源代码+图文示例 150+】
3	MapboxGL【入门教程】 - 【源代码+图文示例150+】
4	Cesium 【入门教程】 - 【源代码+综合教程 200+】
5	threejs【中文API】 - 【源代码+图文示例200+】
6	Shader 编程 【图文示例 100+】
7	Geoserver 【配置教程 100+】
8	卫星应用开发教程 【配置+应用教程 100+】
9	GIS数字孪生与大模型 【应用实战 100+】
10	报表与数字大屏 【Echarts 实战示例】 - 【D3 综合教程】 - 【其他大屏】

---

在CSS中直接设置border-width为0.5px通常不会得到理想中的0.5个物理像素宽度的线条，尤其在高DPI屏幕下，由于浏览器会对小于1px的数值进行四舍五入处理，所以直接写0.5px可能会被渲染成1px的线条。

不过有几种方式可以实现0.5px线条的效果：

1. CSS transform 缩放法：
   创造一个1px的线条然后通过CSS的transform: scale(0.5)将其宽度缩小一半。

   .half-pixel-line {
     height: 1px; /* 或者你需要的长度 */
     background-color: black; /* 或你想要的颜色 */
     transform: scaleY(0.5); /* 对高度进行垂直方向的缩放 */
   }
   

   如果需要水平方向的0.5px线条，则使用 transform: scaleX(0.5)。

2. 伪元素叠加法：
   使用两个相邻的1px线条，并利用负margin让它们重叠起来，形成视觉上的0.5px效果。

   .half-pixel-line::before,
   .half-pixel-line::after {
     content: "";
     display: block;
     height: 1px;
     background-color: black;
     width: 100%; /* 或者指定宽度 */
   }
   
   .half-pixel-line::after {
     margin-top: -0.5px; /* 调整此值使得两条线刚好重合 */
   }
   

3. box-shadow 方法：
   使用 box-shadow 属性模拟线条效果，特别适用于边框样式复杂的场景。

   .half-pixel-line {
     height: 1px; /* 或者你需要的高度 */
     box-shadow: 0 0 0 0.5px black; /* 下偏移量为0，颜色为你想要的线条颜色 */
   }
   

4. 背景渐变法：
   通过background-image设置一个极窄的渐变色带。

   .half-pixel-line {
     height: 1px;
     background-image: linear-gradient(to right, black 50%, transparent 50%);
     background-size: 100% 1px;
   }
   

以上方法可以根据具体场景选择合适的方式来实现0.5px线条效果。值得注意的是，这些方法在不同浏览器和设备上可能存在一定的兼容性差异，需要实际验证。