border-radius製作圓形，半圓形，扇形，橢圓
阿新 • • 發佈：2019-02-19
使用border-radius 製作圓形有兩點技巧：
（1）元素的寬高形同
（2）border-radius值為寬或高的一半，或者直接設定為50%；
製作半圓大同小異，只是圓角方位配合的問題。
下面僅給出示例：
html程式碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv效果如下：
製作扇形遵循三同一不同的原則，三同就是寬高半徑相同，一不同就是圓角位置不同。
橢圓：
.semicircle{ background-color: orange; margin: 30px; } .top{ width: 100px; height: 50px; border-radius: 100px/50px; } .right{ width: 50px; height: 100px; border-radius: 50px/100px; }