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

时间:2016-07-17
我们大家都知道css3的border-radius属性用于设置html元素的圆角边框效果,这只是很基础的应用而已,css3 border-radius还有更强大的功能,本文章向大家介绍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制作半圆

上一页 下一页

原文地址:http://www.manongjc.com/article/1202.html