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
Teach you how to use webpack to package and compile TypeScript code
TypeScript Bundling webpack integration Usually, ...
Implementation example of Docker deployment of front-end and back-end separation projects
Table of contents 1. Environmental Preparation 2....
Detailed explanation of JavaScript timer and button effect settings
Timer Effects: <div> <font id='timeC...
Two examples of using icons in Vue3
Table of contents 1. Use SVG 2. Use fontAwesome 3...
MySQL multi-instance deployment and installation guide under Linux
What is MySQL multi-instance Simply put, MySQL mu...
A brief discussion on the use of GROUP BY and HAVING in SQL statements
Before introducing the GROUP BY and HAVING clause...
Summary of MYSQL full backup, master-slave replication, cascading replication, and semi-synchronization
mysql full backup 1. Enable binary log and separa...
Detailed explanation of how to use grep to obtain MySQL error log information
To facilitate the maintenance of MySQL, a script ...
Using css-loader to implement css module in vue-cli
【Foreword】 Both Vue and React's CSS modular s...
Detailed explanation of the pitfalls of add_header in nginx configuration tutorial
Preface add_header is a directive defined in the ...
Introduction to the usage of props in Vue
Preface: In Vue, props can be used to connect ori...
Basic HTML directory problem (difference between relative path and absolute path)
Relative path - a directory path established based...
Detailed explanation of props and context parameters of SetUp function in Vue3
1. The first parameter props of the setUp functio...
This article tells you how to use event delegation to implement JavaScript message board function
Use event delegation to implement message board f...
Detailed explanation of the idea of implementing password display and hiding function in Vue
Effect: Ideas: Use the input type attribute to di...