css 线不占px,css实现0.5px线条解决移动端兼容问题(推荐)

【内容】：

1.利用background-image 渐变样式

2.可以利用scale缩放

3.给伪元素设置边框

在这里插入代码片

0.5px线实现方法

/*标准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;

}

正常1px边框

伪类设置的边框

到此这篇关于css实现0.5px线条解决移动端兼容问题(推荐)的文章就介绍到这了,更多相关css实现0.5px线条内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！