效果图:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS3</title> <style> ul li{list-style:none;float:left;margin-left:20px;margin-top:50px;background:red;text-align: center;} .circle1{width:100px;height:50px;border-radius:50px 50px 0 0} .circle2{width:50px;height:100px;border-radius: 0 50px 50px 0} .circle3{width:100px;height:50px;border-radius:0 0 50px 50px} .circle4{width:50px;height:100px;border-radius: 50px 0 0 50px} .circle5{width:100px;height:100px;border-radius: 50px} </style> </head> <body> <ul> <li class="circle1">上边圆</li> <li class="circle2">右边圆</li> <li class="circle3">下边圆</li> <li class="circle4">左边圆</li> <li class="circle5">全圆</li> </ul> </body> </html>