爱站程序员基地【内容】：
1.利用background-image 渐变样式
2.可以利用scale缩放
3.给伪元素设置边框
在这里插入代码片<!DOCTYPE html><html><head><meta charset="utf-8"><title>0.5px线实现方法</title><style type="text/css">/*标准1px边框*/.b1{height: 40px;border: 1px solid #ff0000;}/*1.可以利用利用渐变样式=>实现.5px*/.a1{height: 1px;margin-top: 20px;background-image: linear-gradient(0deg, #f00 50%, transparent 50%);}/*2.可以利用缩放-发虚=>实现.5px*/.a2{height: 1px;margin-top: 20px;background-color: #f00;-webkit-transform: scaleY(.5);transform:scaleY(.5);}/*3.四条边框都需要的样式*/.scale-half {margin-top: 20px;height: 100px;border:1px solid #f00;-webkit-transform-origin: 0 0;transform-origin: 0 0;-webkit-transform: scale(.5, .5);transform: scale(.5, .5);}/*4.给伪元素添加设置边框*/.border3{position: relative;}.border3:before{content: \'\';position: absolute;width: 200%;height: 200%;border: 1px solid blue;-webkit-transform-origin: 0 0;-moz-transform-origin: 0 0;-ms-transform-origin: 0 0;-o-transform-origin: 0 0;transform-origin: 0 0;-webkit-transform: scale(.5, .5);-ms-transform: scale(.5, .5);-o-transform: scale(.5, .5);transform: scale(.5, .5);-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}</style></head><body><div class="b1">正常1px边框</div><div class="a1"></div><div class="a2"></div><div class="scale-half"></div><div class="border3"><div class="content">伪类设置的边框</div></div></body></html>
到此这篇关于css实现0.5px线条解决移动端兼容问题(推荐)的文章就介绍到这了,更多相关css实现0.5px线条内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！
