【CSS】设置0.5px的边框宽度

直接写border: 0.5px solid red; 这样在移动端可能会出现问题,下面说下解决办法:

直接上代码:

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .divClass {
            width: 100px;
            height: 100px;
            background-color: aquamarine;
            position: relative;
            margin-bottom: 20px;
            border-radius: 6px;
            /* border: 0.5px solid red; */
        }

        /* 方法1:上下左右都-50%,边框宽度和圆角都得扩大2倍,然后再用scale进行缩放 */
        .border1:after {
            content: '';
            position: absolute;
            top: -50%;
            bottom: -50%;
            left: -50%;
            right: -50%;
            border: 1px solid red;
            border-radius: 12px;
            -webkit-transform: scale(0.5);
            transform: scale(0.5);
        }

        /* 方法2:宽高都扩大两倍,然后再用scale进行缩放 */
        .border2:after {
            content: '';
            display: block;
            position: absolute;
            left: 0;
            top: 0;
            box-sizing: border-box;
            width: 200%;
            height: 200%;
            border: 1px solid red;
            border-radius: 12px;
            -webkit-transform: scale(0.5);
            transform: scale(0.5);
            transform-origin: 0 0;
        }

        .border3::after {
            /* 方法1: */
            content: "";
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background-color: red;
            -webkit-transform: scaleY(0.5);
            transform: scaleY(0.5);
            transform-origin: 0 0;

            /* 方法2: */
            /* content: "";
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 1px;
            background-color: red;
            -webkit-transform: scaleY(0.5);
            transform: scaleY(0.5);
            transform-origin: 0 0; */
        }
    </style>
</head>

<body>
    <div class="divClass border1">我有个0.5px的四条边框</div>
    <div class="divClass border2">我有个0.5px的四条边框</div>

    <div class="divClass border3">我有个0.5px的上边框</div>
</body>

</html>

在浏览器运行截图如下:

总结:目前推荐的是伪元素+tranform缩放的方法,相对灵活一点,可以针对不同元素进行设置。

参考文章:解决安卓不能识别border 0.5px问题_安卓 0.5px-CSDN博客

超全面的解决0.5px边框问题_多出0.5px-CSDN博客

0.5px的边框线遇到的坑_pc端网页有没有0.5的border-CSDN博客

当你设置0.5px的边框宽度时... - 掘金

相关推荐
面向星辰23 分钟前
html各种常用标签
前端·javascript·html
梦65025 分钟前
HTML新属性
前端
东风西巷2 小时前
PDFgear:免费全能的PDF处理工具
前端·pdf·软件需求
森之鸟3 小时前
Mac电脑上如何打印出字体图标
前端·javascript·macos
mCell3 小时前
GSAP 入门指南
前端·javascript·动效
gnip4 小时前
组件循环引用依赖问题处理
前端·javascript
Aotman_5 小时前
el-input textarea 禁止输入中文字符,@input特殊字符实时替换,光标位置保持不变
前端·javascript·vue.js·前端框架·es6
Nan_Shu_6145 小时前
Web前端面试题(1)
前端·面试·职场和发展
lypzcgf5 小时前
Coze源码分析-资源库-创建知识库-前端源码-核心组件
前端·typescript·react·coze·coze源码分析·ai应用平台·agent开发平台
百思可瑞教育6 小时前
在Vue项目中Axios发起请求时的小知识
前端·javascript·vue.js·北京百思教育