这篇文章主要介绍了CSS怎么绘制一个半圆，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
源码：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>W3Cschool-编程网</title><style type="text/css">#semi-circle{width: 200px;height: 100px;background-color: red;border-radius:100px 100px 0 0;}</style></head><body><div id="semi-circle"></div></body></html>上面的例子是绘制了一个上半圆，如果要绘制其他方向的半圆只需要修改border-radius的代码即可。
上半圆：border-radius:100px 100px 0 0;
下半圆：border-radius:0 0 100px 100px;
左半圆：border-radius:100px 0 0 100px;
右半圆：border-radius:0 100px 100px 0;
感谢你能够认真阅读完这篇文章，希望小编分享的“CSS怎么绘制一个半圆”这篇文章对大家有帮助，同时也希望大家多多支持编程网，关注编程网行业资讯频道，更多相关知识等着你来学习!
