左右半圓
<!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 ;