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>
效果图：