<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * {margin: 0; padding: 0;} .clearfix{zoom:1;/*为IE6，7的兼容性设置*/} .clearfix:after { content: '.'; display: block; height: 0; clear: both; visibility: hidden; } ul li { list-style: none; float: left; margin: 50px 0 50px 20px; text-align: center; } li { background: red; } h2 { margin-top: 20px; } .circle1 { width: 100px; height: 50px; border-radius: 50px 50px 0 0; line-height: 50px; } .circle2 { width: 50px; height: 100px; border-radius: 0 50px 50px 0; line-height: 100px; } .circle3 { width: 100px; height: 50px; border-radius: 0 0px 50px 50px; line-height: 50px; } .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; } .demo { /*左半圆*/ position:absolute; /*clip 属性剪裁绝对定位元素。也就是说，只有 position:absolute 的时候才是生效的。*/ width: 100px; height: 100px; border-radius: 50px; /* line-height: 50px; */ clip: rect(0px 50px 100px 0px); /*唯一合法的形状值是：rect (top, right, bottom, left)*/ } .right-circle { /*右半圆*/ left: 200px; clip: rect(0px 100px 100px 50px); /*唯一合法的形状值是：rect (top, right, bottom, left)*/ } </style> </head> <body> <div> <h2>用border-radius实现半圆</h2> <ul class="clearfix"> <li class="circle1">上边圆</li> <li class="circle2">左边圆</li> <li class="circle3">下边圆</li> <li class="circle4">左边圆</li> <li class="circle5">全圆</li> </ul> <hr> <h2>css3的clip 方法剪裁实现半圆</h2> <p style="color: red;">clip 属性剪裁绝对定位元素。也就是说，只有 position:absolute 的时候才是生效的。唯一合法的形状值是：rect (top, right, bottom, left)</p> <ul class="clearfix" style="position: relative;"> <li class="demo">左半圆</li> <li class="demo right-circle">右半圆</li> <li></li> </ul> </div> </body> </html>
效果图：
感兴趣的朋友可以去熟试下！！！