Draw a 0.5px line
Use the meta viewport method
This is also the way to taobao touch screen, commonly used mobile HTML viewport Settings are as follows
<meta name="viewport" content="Initial - scale = 1.0, the maximum - scale = 1.0, user - scalable = no" />
Copy the codeI won’t go into the details, but it is to make the page’s height and width the same as the device’s height and width pixels. To make it easy to draw a 0.5px viewport, the Settings are as follows
<meta name="viewport" content="Initial - scale = 0.5, the maximum - scale = 0.5, the minimum - scale = 0.5, user - scalable = no" />
Copy the codeThe HTML is twice the width and height of the device. If the CSS board is 1 pixel, the line looks like a transform: Scale (0.5), which is 0.5 pixels to the naked eye
But this way involves the overall layout of the page and the size of the picture, so if you use this way or to determine in advance
usingBorder – the image of the way
This one is actually relatively simple, just make a 0.5 pixel line with the background color
<! DOCTYPEhtml>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="Initial - scale = 1.0, the maximum - scale = 1.0, user - scalable = no" />
<title>boardTest</title>
<style>
p{
margin: 50px auto;
padding: 5px 10px 5px 10px;
color: red;
text-align: center;
width: 60px;
}
p:first-child{
border-bottom: 1px solid red;
}
p:last-child{
border-width: 0 0 1px 0; border-image: url("img/line_h.gif") 2 0 round;
}
</style>
</head>
<body>
<div>
<p>Click on the 1</p>
<p>Click on the 2</p>
</div>
</body>
</html>
Copy the codeusingBackground – the image of the way
Here I use the method of linear-gradient, and the code is as follows
<! DOCTYPEhtml>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="Initial - scale = 1.0, the maximum - scale = 1.0, user - scalable = no" />
<title>boardTest</title>
<style>
p{
margin: 50px auto;
padding: 5px 10px 5px 10px;
color: red;
text-align: center;
width: 60px;
}
p:first-child{
border-bottom: 1px solid red;
}
p:last-child{
background-image: -webkit-linear-gradient(bottom,red 50%,transparent 50%);
background-image: linear-gradient(bottom,red 50%,transparent 50%);
background-size: 100% 1px;
background-repeat: no-repeat;
background-position: bottom right;
}
</style>
</head>
<body>
<div>
<p>Click on the 1</p>
<p>Click on the 2</p>
</div>
</body>
</html>
Copy the code
linear-gradient(bottom,red 50%,transparent 50%); Background-size: 100% 1px; background-size: 100% 1px; background-size: 100% 1px;
This shows up as 0.5 pixel lines
usingtransform: scale()
To scale the height of the drawn line by half times, the code is as follows
<! DOCTYPEhtml>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="Initial - scale = 1.0, the maximum - scale = 1.0, user - scalable = no" />
<title>boardTest</title>
<style>
p{
margin: 50px auto;
padding: 5px 10px 5px 10px;
color: red;
text-align: center;
width: 60px;
}
p:first-child{
border-bottom: 1px solid red;
}
p:last-child{
position: relative;
}
p:last-child:after {
position: absolute;
content: ' ';
width: 100%;
left: 0;
bottom: 0;
height: 1px;
background-color: red;
-webkit-transform: scale(1.0.5);
transform: scale(1.0.5);
-webkit-transform-origin: center bottom;
transform-origin: center bottom
}
</style>
</head>
<body>
<div>
<p>Click on the 1</p>
<p>Click on the 2</p>
</div>
</body>
</html>
Copy the codeThe difference between transition and animation
Most of the properties of Animation and Transition are the same. They both change the attribute values of elements over time. The main difference between them is that transition needs to trigger an event to change the attribute values, while Animation does not need to trigger any event to change the attribute values over time. And the transition is 2 frames from…. To, while animation can be frame by frame.
Vertical center method
(1) margin: auto method
div{
width: 400px;
height: 400px;
position: relative;
border: 1px solid # 465468;
}
img{
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
Copy the codeMargin: 0 can achieve separation from the center of the document flow.
(2) the margin negative method
.container{
width: 500px;
height: 400px;
border: 2px solid # 379;
position: relative;
}
.inner{
width: 480px;
height: 380px;
background-color: # 746;
position: absolute;
top: 50%;
left: 50%;
margin-top: -190px; /* half of the height */
margin-left: -240px; /* half of width */
}
Copy the codeTransform: translateX(-50%) and transform: translateY(-50%)
(3) Table-cell (not out of the document flow)
Set display:table-cell to the parent element and vertical-align:middle so that the element is vertically centered.
css:
div{
width: 300px;
height: 300px;
border: 3px solid # 555;
display: table-cell;
vertical-align: middle;
text-align: center;
}
img{
vertical-align: middle;
}
Copy the code(4) using flex
Set the parent element to display:flex and set align-items:center; justify-content:center;
.container{
width: 300px;
height: 200px;
border: 3px solid # 546461;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
.inner{
border: 3px solid # 458761;
padding: 20px;
}
Copy the codeother
The text ellipsis of the element
The text ellipsis of a one-line element
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
Copy the codeThe text ellipsis of a multi-line element
display: -webkit-box
-webkit-box-orient:vertical
-webkit-line-clamp:3
overflow:hidden
Copy the codeUse CSS to create a coin rotation effect
CSS code
#euro {
width: 150px;
height: 150px;
margin-left: -75px;
margin-top: -75px;
position: absolute;
top: 50%;
left: 50%;
transform-style: preserve-3d;
animation: spin 2.5 s linear infinite;
}
.back {
border-radius: 50%;
width: 150px;
height: 150px;
background: red;
}
.middle {
border-radius: 50%;
width: 150px;
height: 150px;
background: green;
transform: translateZ(1px);
position: absolute;
top: 0;
}
.front {
border-radius: 50%;
height: 150px;
width: 150px;
background: purple;
position: absolute;
top: 0;
transform: translateZ(10px);
}
@keyframes spin {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(360deg); }}Copy the codeThe HTML code
<div id="euro">
<div class="back"></div>
<div class="middle"></div>
<div class="front"></div>
</div>
Copy the code