h5-圆角的使用-案例安卓机器人

1.圆角的使用

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         div{
 8             width: 200px;
 9             height: 100px;
10             border: 1px solid red;
11             background-color: red;
12             /*添加圆角*/
13             /*border-radius:10px;   一个值是四个角都一样*/
14             /*border-radius:10px 30px;
15             第一个值左上  右下  第二个值右上   左下*/
16             /*border-radius:10px  30px  60px;
17             第一个值是左上  第二个值是右上  和左下  第三个值是右下*/
18             /*border-radius:10px  30px   60px  80px;
19                遵循左上  右上  右下  左下的顺序*/
20 
21             /*添加椭圆*/
22             /*border-radius:100px/50px
23             添加/是用来设置当前不同方向的半径
24             水平方向x轴/垂直方向y轴
25             */
26             border-radius:100px/50px;
27 
28 
29             /*添加某个角的圆角*/
30             /*border-top-left-radius: 10px;*/
31 
32             /*设置某个角的不同方向上的不同圆角值*/
33             /*border-top-left-radius: 100px  50px;
34             border-bottom-left-radius: 100px  50px;*/
35 
36             /*若果四个角的不同方向上的不同圆角值
37             分别是
38             水平方向的：左上  右上  右下  左下/垂直方向：左上  右上  右下  左下
39             */
40             border-radius: 100px 80px 70px 60px/20px 50px 80px 90px;
41         }
42     </style>
43 </head>
44 <body>
45 <div></div>
46 </body>
47 </html>

2.安卓机器人小案例：结合伪元素实现

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 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{
35             left: 70px;
36         }
37         .an_header::after{
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{
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{
59             left: -40px;
60         }
61         .an_body::after{
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{
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>

效果图：

原文地址：https://www.cnblogs.com/FengBrother/p/11373372.html