可以画个1/4之一的圆也可以画整个圆
<html> <style type="text/css"> div{ background-color: #000; width: 100px; height: 100px; border-radius: 50px; position: absolute; } #half{ background-color: #fff; width: 50px; height: 50px; top: 1px; left: 1px; position: absolute; border-radius: 50px 0 0 0 ; } </style> <body> <div> <div id="half"></div> </div> </body> </html>
效果：
也可以画个半圆
<html> <style type="text/css"> body{ background-color: #f00; } div{ content: ""; position: relative; left: 200px; width: 200px; height: 400px; border-radius: 0px 200px 200px 0px; background-color: #fff; display: block; } </style> <body> <div></div> </body> </html>