今天小编跟大家讲解下有关CSS3实现0.5px的边框 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关CSS3实现0.5px的边框 的相关资料，希望小伙伴们看了有所帮助。
单边框0.5px，可以用以下方式：方式一：border + border-image + 线性渐变linear-gradient
<div class="border">0.5像素边框</div><style> .border { width: 200px; height: 200px; margin: 0 auto; border-bottom: 1px solid transparent; border-image: linear-gradient(to bottom,transparent 50%, red 50%) 0 0 100%/1px 0; }</style>方式二：定位 + 伪元素 + background + 线性渐变linear-gradient
<div class="border">0.5像素边框</div><style> .border { width: 200px; height: 200px; margin: 0 auto; position: relative; } .border::before { content:""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background-image: linear-gradient(to bottom, transparent 50%, red 50%); }</style>方法三：定位 + 伪元素 + transfrom缩放（scale）
<div class="border">0.5像素边框</div><style> .border { width: 200px; height: 200px; margin: 0 auto; position: relative; } .border::after { content:""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: red; transform: scaleY(0.5); }</style>对于需要四边0.5像素边框，可以用以下方式：方式：定位 + 伪元素 + transfrom缩放（scale）
<div class="border">0.5像素边框~~~~</div><style> .border { width: 200px; height: 200px; margin: 0 auto; position: relative; } .border::before { content:""; position: absolute; top: 0; left: 0; width: 200%; height: 200%; border: 1px solid red; transform-origin: 0 0; transform: scale(0.5); }</style>来源：爱蒂网
