<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>
效果圖：
感興趣的朋友可以去熟試下！！！