css3样式篇之border-radius
border-radius的四个值分别代表左上角,右上角,右下角,左下角边框圆的半径。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圆的画法</title>
<style>
.top-circle {
width: 100px;
height: 50px;
border-radius: 50px 50px 0 0;
background: #000;
}
.right-circle {
width: 50px;
height: 100px;
border-radius: 0 50px 50px 0;
background: #000;
}
.bottom-circle {
width: 100px;
height: 50px;
border-radius: 0 0 50px 50px;
background: #000;
}
.left-circle {
width: 50px;
height: 100px;
border-radius: 50px 0 0 50px;
background: #000;
}
.circle {
width: 100px;
height: 100px;
border-radius: 50px;
background: #000;
}
</style>
</head>
<body>
<p>实心上半圆</p>
<div class="top-circle"></div>
<p>实心右半圆</p>
<div class="right-circle"></div>
<p>实心下半圆</p>
<div class="bottom-circle"></div>
<p>实心左半圆</p>
<div class="left-circle"></div>
<p>圆</p>
<div class="circle"></div>
</body>
</html>
效果图: