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 ;