border-radius制作实心圆
实现思路：将div的宽度（width）和高度(height)值设为相等，即正方形DIV，并且DIV的四个圆角值都设置为其宽度值的一半
<!DOCTYPE html>
<html ns=\"http://www.w3.org/1999/xhtml\">
<head>
< >CSS3 border-radius制作实心圆 - http://www.manongjc.com</ >
<style type=\"text/css\">
#box
{
width:200px;
height:200px;
border-radius:50%;
background-color:red;
}
</style>
</head>
<body>
<div id=\"box\">
</div>
</body>
</html>
运行结果：
![\"css3](\"/images/border-radius-1202.png\")
border-radius制作半圆
知道了border-radius制作圆的思路，那么制作半圆的思路就一目了然了。
把高度(height)设为宽度（width）的一半，并且只设置左上角和右上角的圆角半径与元素的高度一致，而右下角和左下角的圆角半径设置为0。
<!DOCTYPE html>
<html ns=\"http://www.w3.org/1999/xhtml\">
<head>
< >CSS3 border-radius属性 - http://www.manongjc.com/article/1202.html</ >
<style type=\"text/css\">
#box
{
width:200px;
height:100px;
border-radius:100px 100px 0 0;
background-color:red;
}
</style>
</head>
<body>
<div id=\"box\">
</div>
</body>
</html>
运行结果：
![\"css3](\"/images/border-radius-1202_1.png\")
继续阅读与本文标签相同的文章
上一篇 :
华人数学家解开视觉奥秘：一切都是大脑假装让人看见
下一篇 :
长三角卫生发展水平比较：上海已经进入超老龄化阶段
-
手机信号突然从“4G”变成“E”，是什么意思？客服给出答案
2026-05-14栏目： 教程
-
互联网架起“乌镇式生活”
2026-05-14栏目： 教程
-
微信才是内存“杀手”，别再乱清理，关闭这个功能，手机立马流畅
2026-05-14栏目： 教程
-
手机信号变成E是什么意思？看完专业人士给出的解释后，涨知识了
2026-05-14栏目： 教程
-
关于Word的四个隐藏办公小技巧，你可能一个也不知道，建议收藏！
2026-05-14栏目： 教程