CSS implements 0.5px lines to solve mobile compatibility issues (recommended)

【content】:

1. Use background-image gradient style

2. You can use scale to zoom

3. Set borders for pseudo-elements

Insert code snippet here <!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>0.5px line implementation method</title>
 <style type="text/css">
 /*Standard 1px border*/
 .b1{
 height: 40px;
 border: 1px solid #ff0000;
 }
 /*1. You can use the gradient style => to achieve .5px*/
 .a1{
 height: 1px;
 margin-top: 20px;
 background-image: linear-gradient(0deg, #f00 50%, transparent 50%);
 }
 /*2. You can use zoom-blur => to achieve .5px*/
 .a2{
 height: 1px;
 margin-top: 20px;
 background-color: #f00;
 -webkit-transform: scaleY(.5);
 transform:scaleY(.5);
 }
 /*3. Styles required for all four borders*/
 .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. Add borders to pseudo elements*/
 .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">Normal 1px border</div>
<div class="a1"></div>
<div class="a2"></div>
<div class="scale-half"></div>
<div class="border3">
 <div class="content">Border set by pseudo class</div>
</div>
</body>
</html>

This is the end of this article about how to use CSS to implement 0.5px lines to solve mobile compatibility issues (recommended). For more relevant content about how to use CSS to implement 0.5px lines, please search previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!

<<: Summary of Vue watch monitoring methods

>>: Detailed explanation of whether the MySQL database should use foreign key constraints