css实现半圆和圆 January 17, 2019 css实现半圆和圆 <!--more--> 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> ``` 结果： 
