css3使用border-radius制作圆和半圆

border-radius制作实心圆

实现思路：将div的宽度（width）和高度(height)值设为相等，即正方形DIV，并且DIV的四个圆角值都设置为其宽度值的一半

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS3 border-radius制作实心圆 - http://www.manongjc.com</title>
    <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 border-radius制作实心圆

border-radius制作半圆

知道了border-radius制作圆的思路，那么制作半圆的思路就一目了然了。

把高度(height)设为宽度（width）的一半，并且只设置左上角和右上角的圆角半径与元素的高度一致，而右下角和左下角的圆角半径设置为0。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS3 border-radius属性 - http://www.manongjc.com/article/1202.html</title>
    <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 border-radius制作半圆