1. Use of rounded corners
1 DOCTYPE html>
2 < html lang="en">
3 < head>
4 < meta charset="UTF-8">
5 < title>Titletitle>
6 < style>
7 div{
8 width: 200px;
9 height: 100px;
10 border: 1px solid red;
11 background-color: red;
12 /*Add rounded corners*/
13 /*border-radius:10px; A value is the same for all four corners*/
14 /*border-radius:10px 30px;
15 The first value is upper left and right The second value is lower right upper left lower left*/
16 /*border-radius:10px 30px 60px;
17 The first value is the upper left The second value is the upper right and the lower left and the third value is the lower right*/
18 /*border-radius:10px 30px 60px 80px;
19 Follow top left, top right, bottom right, bottom left Order*/
20
21 /*Add ellipse*/
22 /*border-radius:100px/50px
23 Add/is used to set Current radius in different directions
24 horizontal x axis/vertical Direction y axis
25 */
26 border-radius:100px/50px;
27
28
29 /*Add a rounded corner*/
30 /*border-top-left-radius: 10px;*/
31
32 /*Set different rounded corner values in different directions of a corner*/
33 /*border-top-left-radius: 100px 50px;
34 border-bottom-left- radius: 100px 50px;*/
35
36 /*If the four corners have different rounded corners in different directions
37 respectively
38 Horizontal direction: upper left and upper right Bottom right and bottom left/Vertical direction: top left, top right, bottom right, bottom left
39 */
40 border-radius: 100px 80px 70px 60px/20px 50px 80px 90px< /span>;
41 }
42 style>
43 head>
44 < body>
45 < div>div>
46 body>
47 html>
2. Android robot small case: combined with pseudo-element implementation
< div class="code">
1 DOCTYPE html>
2 < html lang="en">
3 < head>
4 < meta charset="UTF-8">
5 < title>Titletitle>
6 < style>
7 *{
8 margin: 0;
9 height: 0;
10 }
11 .content{
12 width: 500px;
13 height: 500px;
14 border: 1px solid red;
15 margin: 50px auto;
16 }
17 .an_header{
18 width: 250px;
19 height: 125px;
20 background-color: green;
21 margin: 10px auto;
22 border-radius: 125px 125px 0 0;
23 position: relative;
24 }
25 .an_header::before,.an_header:: after{
26 content: "";
27 width: 20px;
28 height: 20px;
29 border-radius: 10px;
30 background-color: #fff;
31 position: absolute;
32 bottom: 40px;
33 }
34 .an_header::before< span style="background-color: #f5f5f5; color: #000000;">{
35 left: 70px;
36 }
37 .an_header::after< span style="background-color: #f5f5f5; color: #000000;">{
38 right: 70px;
39 }
40 .an_body{
41 width: 250px;
42 height: 250px;
43 background-color: green;
44 border-radius: 0 0 20px 20px;
45 margin: 0px auto;
46 position: relative;
47 }
48 .an_body::before,
49 .an_body::after< /span>{
50 content: "";
51 width: 30px;
52 height: 180px;
53 position: absolute;
54 background-color: green;
55 top: 30px;
56 border-radius: 10px;
57 }
58 .an_body::before< span style="background-color: #f5f5f5; color: #000000;">{
59 left: -40px;
60 }
61 .an_body::after< span style="background-color: #f5f5f5; color: #000000;">{
62 right: -40px;
63 }
64 .an_footer{
65 width: 250px;
66 height: 100px;
67 margin: 0px auto;
68 position: relative;
69 }
70 .an_footer::before,
71 .an_footer::after< /span>{
72 content: "";
73 width: 30px;
74 height: 90px;
75 position: absolute;
76 background-color: green;
77 top: 0px;
78 border-radius: 0 0 10px 10px;
79 }
80 .an_footer::before{
81 left: 50px;
82 }
83 .an_footer::after{
84 right: 50px;
85 }
86 style>
87 head>
88 <body>
89 <div class="content">
90 <div class="an_header">div>
91 <div class="an_body">div>
92 <div class="an_footer">div>
93 div>
94 body>
95 html>
