html中半圆怎么写,《前端面试题》- CSS - 如何画半圆

设置一个长是宽的两倍的长方形，然后根据需要利用border-radius去除两个顶角。

实例(画了四个半圆)：

代码：

Document

div { width: 100px; height: 50px; }

.div1 { border-radius: 100px 100px 0px 0px; background-color: red; }

.div2 { border-radius: 0px 0px 100px 100px; background-color: blue; }

.div3, .div4 { width: 50px; height: 100px; display: inline-block; }

.div3 { border-radius: 100px 0px 0px 100px; background-color: gold; }

.div4 { border-radius: 0px 100px 100px 0px; background-color: green; }