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
Recommend
Cross-domain issues in front-end and back-end separation of Vue+SpringBoot
In the front-end and back-end separation developm...
Detailed explanation of how to solve the problem that the docker container cannot access the host machine through IP
Origin of the problem When using docker, I unfort...
Web realizes the code of popping up the window of uploading files by clicking the picture
Copy code The code is as follows: <style> ....
Detailed explanation of MySQL 30 military rules
1. Basic Specifications (1) InnoDB storage engine...
How to customize more beautiful link prompt effect with CSS
Suggestion: Handwriting code as much as possible c...
Linux command line quick tips: How to locate a file
We all have files stored on our computers -- dire...
Solution to mysql failure to start due to insufficient disk space in ubuntu
Preface Recently, I added two fields to a table i...
Solutions for building ping and nfs in embedded Linux development environment
1. Embedded Software Level 1) Bootloader->Boot...
Detailed explanation of MySQL execution plan
The EXPLAIN statement provides information about ...
JavaScript to achieve the effect of clicking on the self-made menu
This article shares the specific code of JavaScri...
Detailed explanation of MySQL sql99 syntax inner join and non-equivalent join
#Case: Query employee salary levels SELECT salary...
Solution to the conflict between Linux kernel and SVN versions
Phenomenon The system could compile the Linux sys...
The meaning of the 5 types of spaces in HTML
HTML provides five space entities with different ...
React's context and props explained
Table of contents 1. context 1. Usage scenarios 2...
Using VMware IOInsight to perform refined virtual machine storage performance monitoring
illustrate: VMware IOInsight is a tool that helps...