css實現半圓效果
阿新 • • 發佈：2020-08-18
<!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> *{margin:0;padding:0;} ul li{list-style:none;float:left;margin-left:20px;margin-top:50px;text-align:center;} li{background:red;} .circle1{width:100px;height:50px;border-radius:50px 50px 0 0;line-height:50px;}
.circle2{width:50px;height:100px;border-radius:0 50px 50px 0;line-height:100px;}
.circle3{width:100px;height:50px;border-radius:0 0 50px 50px;line-height:50px;} .circle4{width:50px;height:100px;border-radius: 50px 0 0 50px;line-height:100px;} .circle5{width:100px;height:100px;border-radius: 50px;line-height:100px;} </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>