前几天 W3Cschool 小编教大家用CSS绘制基本图形。那么我们现在开启新的篇章，学习一些特殊图形的画法。那么这篇文章，小编教大家用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如何绘制半圆的全部内容，是不是超级简单呢。
声明：小猿资源站是一个资源分享和技术交流平台，本站所发布的一切破解补丁、注册机和注册信息及软件的解密分析文章仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。本站信息来自网络，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，购买注册，得到更好的正版服务。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
