使用border-radius 制作圆形有两点技巧：
（1）元素的宽高形同
（2）border-radius值为宽或高的一半，或者直接设置为50%；
制作半圆大同小异，只是圆角方位配合的问题。
下面仅给出示例：
html代码：
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <metahttp-equiv="X-UA-Compatible"content="ie=edge"> <title>Document</title> <linkhref="D:\myweb\css\3-19-1.css"type="text/css"rel="stylesheet"> </head> <body> <divclass="div">圆</div> <divclass="semicircletop">上半圆</div> <divclass="semicircleright">右半圆</div> <divclass="semicirclebottom">下半圆</div> <divclass="semicircleleft">左半圆</div> </body> </html> css代码： .div{ width:200px; height:200px; border:2pxorangesolid; border-radius:50%; } .semicircle{ background-color:orange; margin:30px; } .top{ width:100px; height:50px; border-radius:50px50px00; } .right{ width:50px; height:100px; border-radius:050px50px0; } .bottom{ width:100px; height:50px; border-radius:0050px50px; } .left{ width:50px; height:100px; border-radius:50px0050px; }
效果如下：
制作扇形遵循三同一不同的原则，三同就是宽高半径相同，一不同就是圆角位置不同。
.div{ width:200px; height:200px; border:2pxorangesolid; border-radius:50%; } .semicircle{ background-color:orange; margin:30px; } .top{ width:100px; height:100px; border-radius:100px000; } .right{ width:100px; height:100px; border-radius:0100px00; } .bottom{ width:100px; height:100px; border-radius:00100px0; } .left{ width:100px; height:100px; border-radius:000100px; }
椭圆：
.semicircle{ background-color:orange; margin:30px; } .top{ width:100px; height:50px; border-radius:100px/50px; } .right{ width:50px; height:100px; border-radius:50px/100px; }
