1. Single line ellipsis. If it exceeds a certain width, the content will not be displayed, and the ellipsis will replace it
.text1{ width:200px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } <div class="text1">How deep is the courtyard? Willows depend on each other, willow catkins rise with the wind, ha ha</div>
The effects achieved are as follows:
2. When the specified content exceeds the fixed line, the content will not be displayed and will be replaced by an ellipsis
.text2{ width:200px; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; // This controls the number of rows displayed overflow:hidden; } <p class="text2"> The courtyard is deep. How deep is it? Willows and willows, willow catkins rise with the wind The courtyard is deep. How deep is it? Willows and willows, willow catkins rise with the wind The courtyard is deep. How deep is it? Willows and willows, willow catkins rise with the wind The courtyard is deep. How deep is it? Willows and willows, willow catkins rise with the wind </p>
The results are as follows:
3. Shift left negative
Usage scenario: you want the full screen to be displayed in 4 columns, with a gap of 5px between each column, as follows:
.item{ margin-left:10px; // The size of this negative value is consistent with the border width of each box of the child element. You do not recommend using inner here:first-child{border:none}The reason is that border none Will cause inconsistent box sizes } .inner{ width:25%; height:100px; border-left:10px solid #fff; // Achieve 10px spacing effect float:left; box-sizing:border-box; } inner:nth-child(2n+1){background-color:red} inner:nth-child(2n){background-color:green;} <div class="item"> <div class="inner"></div> <div class="inner"></div> <div class="inner"></div> <div class="inner"></div> </div>
4. Full screen layout
This layout method can be realized. The left and right are fixed, and the middle is adaptive. The layout method is position+float
.left,.right{ width:200px; background:red; } .left{ float:left; } .right{ float:right; } .mid{ position:absolute; left:200px; right:200px; background: aqua; } <div class="left"></div> <div class="mid"></div> <div class="right"></div>
The display effect is:
5. Use of adjacent sibling selectors
This application is similar to the application in question 3 above. The difference is that it is arranged vertically. There are four small boxes in the big box. A border 5px is set for the big box, and then a top margin 5px is set for each small box. However, the result is like this
You can see that the borders on the top are overlapped. As above, if you use: first child border top: none, there will be some problems:
If you use box sizing: border box, the content area of the first element will be larger (5px more). If you do not use border box, the overall height of the first box will be smaller by 5px
Solution: use the adjacent sibling element selector
ul{ width:300px; border:5px solid red; list-style:none; padding:0; margin:0 auto; text-align:center; box-sizing:border-box; } ul li{ height:50px; line-height:48px; } li+li{ border-top:5px solid red; // Using li+li will only work on the next sibling node li of Li } <ul> <li>1</li> <li>1</li> <li>1</li> <li>1</li> </ul>
The results are:
In addition, to realize the color change of the border when the mouse is moved up, you can use the outline
6. Triangle small drawing and mark
Triangle - standard triangle .triangle1{ width:0; height:0; border-width:20px; border-style:solid; border-color:green greenyellow blue pink; } <div class="triangle1"></div>
The styles of the four triangles are as follows. To generate triangles in which direction, set the border color in other directions to transparent
right triangle .trangle2{ width:0; height:0; border-width:30px 15px 0 0; border-style:solid; border-color:transparent greenyellow transparent transparent; } <div class="triangle2"></div>
7. Linear gradient and mirror gradient to realize color text
1) linear gradient (Color1, color2,...) Or linear gradient (direction, Color1, color2,...) Or linear gradient (angle, Color1, color2,...)
2) mirror image gradient diverges from the center point to the surrounding
radial-gradient(shape size at position, startColor, ... ,lastColor);
Shape: circle (default, radiate outward with a circular path)
ellipse (radiating outward in an elliptical path)
Size: defines the size of the gradient. Possible values:
Farthest corner (default): Specifies that the radius size of the mirrored gradient is the distance from the center of the circle to the foot farthest from the center of the circle
Closest color: Specifies that the radius of the mirrored gradient is the distance from the center of the circle to the corner closest to the center of the circle
Farthest side: Specifies that the radius of the mirrored gradient is the distance from the center of the circle to the edge farthest from the center of the circle
Closest side: Specifies that the radius of the mirrored gradient is the distance from the center of the circle to the edge closest to the center of the circle
Position: defines the starting position of the gradient. Possible values are:
Center (default): sets the center to the ordinate value of the center of the mirror gradient
Top: sets the top as the ordinate value of the mirror gradient Center
Bottom: sets the ordinate value of the center of the circle whose bottom is the mirror gradient
0: set the vertical coordinate value of the center of the mirror gradient on the left
100%: set the vertical coordinate value of the center of the circle with the mirror gradient on the right
8. Scroll bar
1) container::-webkit-scrollbar{}: width, background fillet, etc. can be set for the scroll bar as a whole
2) container::-webkit-scrollbar-button{}: start and end positions of scrollbars
3) container:: -webkit-scrollbar-trunk{}: the background and rounded corner can be set for the scrollbar slider
4) container::-webkit-scrollbar-track{}: track in scroll bar
As shown below
8. Card text hiding
9. Text clipping
10. Path drawing