css3 border-radius制作半圆---上下左右半圆

左右半圆

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>border-radius</title>
<style type="text/css">
div.circle{
    height:100px;
    width:50px;
    background:#9da;
    border-radius:0 50px 50px 0 ;右半圆

   /* border-radius:50px 0 0 50px;左半圆*/
    }

 

div.circle{

    width:100px;
    height:50px;
    background:#9da;
    border-radius:50px 50px 0 0 ;/*上半圆

   /* border-radius:50px 0 0 50px;*//*下半圆*/
    }
</style>
</head>
<body>
<div class="circle"></div>
</body>
</html>

上下半圆

1、上下半圆宽度是高度的两倍

2、上半圆border-radius：右上等于高度值下左等于0       border-radius:50px 50px 0 0 ;/

3、下半圆border-radius：左上等于高度值右下等于0       border-radius:50px 0 0 50px;

 

左右半圆

1、左右半圆宽度是高度的一半

 

2、左半圆border-radius：左上等于宽度值等于0             border-radius:50px 0 0 50px;

3、右半圆border-radius：右下等于宽度值左上等于0        border-radius:0 50px 50px 0 ;

posted on 2015-03-03 11:53  鬼鬼丫404  阅读(4103)  评论(0)    收藏  举报

导航