CSS2 일부 반원형 필렛 등에 효과가 필요한 오류가 일반적으로 소프트웨어를 통해 PS 등으로 처리하는 경우 CSS3, 그것은 필요가없고, 단지 경계 반경에 의해 달성 될 수 있으며, 대폭의 개발을 용이 효율성.
다양한 방향 반원 될지 아크 고체 원형, 반원형 둥근 구현 코드 CSS3 경계 반경 속성이며, 또한 인출 만 될 수 있고, 경계 반경 필렛 반경 및 크기를 정의 할 수 없다.
코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3</title>
<style>
*{margin:0;padding:0;}
ul li{list-style:none;float:left;margin-left:20px;margin-top:50px;text-align:center;}
li{background:red;}
.circle1{width:100px;height:50px;border-radius:50px 50px 0 0;line-height:50px;}
.circle3{width:100px;height:50px;border-radius:0 0 50px 50px;line-height:50px;}
.circle2{width:50px;height:100px;border-radius:0 50px 50px 0;line-height:100px;}
.circle4{width:50px;height:100px;border-radius: 50px 0 0 50px;line-height:100px;}
.circle5{width:100px;height:100px;border-radius: 50px;line-height:100px;}
</style>
</head>
<body>
<ul>
<li class="circle1">上边圆</li>
<li class="circle2">左边圆</li>
<li class="circle3">下边圆</li>
<li class="circle4">左边圆</li>
<li class="circle5">全圆</li>
</ul>
</body>
</html>
web前端开发学习Q-q-u-n：⑦⑧④-⑦⑧③-零①②，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频결과는 다음과 같습니다 :