1、半圓
半圓分為：上半圓、下半圓、左半圓、右半圓，我們只要學會制作某一個方向的半圓，其他方向的半圓都可以輕松實現，其原理都一樣。
假如我們要制作上半圓，實現原理：把高度height設置為寬度width的一半，並且左上角和右上角的圓角半徑定義為元素的高度一致，而右下角和左下角的圓角半徑定義為0.
而右下角和左下角的圓角半徑定義為0.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>半圓角</title> <style type="text/css"> div{ width: 100px; height: 50px; border:1px solid black; background-color: blue; border-radius: 100px 100px 0 0; } </style> </head> <body> <div></div> </body> </html>
結果：
2、圓
實現方式：寬度、高度設置為一樣，然后四角圓角半徑設置為寬度、高度的一半
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>圓</title> <style type="text/css"> div{ width: 100px; height: 100px; border:1px solid black; background-color: blue; border-radius: 50px; } </style> </head> <body> <div></div> </body> </html>
結果：
