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