1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <style type="text/css">
7 .div1{width: 200px;height: 200px;border-radius: 40px;background-color: #ccc;}
8 .div2{width:200px;height: 200px;border-radius: 100px;background-color: #ccc;}
9 .div3{width:200px;height: 200px;border-radius: 100px 0 100px 0/100px 0 100px 0;/*上左、上右、下右、下左*/background-color: #ccc;}
10 .div4{width:200px;height: 200px;border-radius: 100px 0 100px 100px/100px 0 100px 100px;background-color: #ccc;}
11 .div5{width:200px;height: 100px;border-radius:100px/50px;background-color: #ccc;}
12 .div6{width:100px;height:200px;border-radius:50px/100px;background-color: #ccc;}
13 .div7{width:0px;border:100px solid red;border-top-color: purple;border-left-color: red;border-right-color: yellow;border-bottom-color: green;}
14 .div8{width:0px;border:100px solid yellow;border-right-color: transparent;}//border的四条边其实是四个三角形组成的
15 .div9{width:0px;border:100px solid yellow;border-left-color: transparent;border-radius: 50%;}
16 </style>
17 </head>
18 <body>
19 <div class="div1"></div>
20 <div class="div2"></div>
21 <div class="div3"></div>
22 <div class="div4"></div>
23 <div class="div5"></div>
24 <div class="div6"></div>
25 <div class="div7"></div>
26 <div class="div8"></div>
27 <div class="div9"></div>
28 </body>
29 </html>
效果图：
时间： 2024-11-05 19:01:10