站長(zhǎng)資訊網(wǎng)
css做半圓的方法：1、使用border-radius畫半圓，語(yǔ)句如“border-radius: 50px 50px 0 0;”；2、使用clip屬性畫半圓，語(yǔ)句如“clip: rect(0px 50px 100px 0px);”。
本文操作環(huán)境：windows7系統(tǒng)、HTML5&&CSS3版，DELL G3電腦
css怎么做半圓？
1、使用border-radius畫半圓
把div高度(height)設(shè)為寬度（width）的一半，并且只設(shè)置左上角和右上角的圓角半徑與元素的高度一致，而右下角和左下角的圓角半徑設(shè)置為0。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> * { margin: 0; padding: 0; } .clearfix { zoom: 1; /*為IE6，7的兼容性設(shè)置*/ } .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; } </style> </head> <body> <div> <h2>用border-radius實(shí)現(xiàn)半圓</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> </div> </body> </html>
效果圖：
2、使用clip屬性畫半圓
clip 屬性剪裁絕對(duì)定位元素。
當(dāng)一幅圖像的尺寸大于包含它的元素時(shí)會(huì)發(fā)生什么呢？"clip" 屬性允許您規(guī)定一個(gè)元素的可見尺寸，這樣此元素就會(huì)被修剪并顯示為這個(gè)形狀。
說(shuō)明
這個(gè)屬性用于定義一個(gè)剪裁矩形。對(duì)于一個(gè)絕對(duì)定義元素，在這個(gè)矩形內(nèi)的內(nèi)容才可見。出了這個(gè)剪裁區(qū)域的內(nèi)容會(huì)根據(jù) overflow 的值來(lái)處理。剪裁區(qū)域可能比元素的內(nèi)容區(qū)大，也可能比內(nèi)容區(qū)小。
示例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> * { margin: 0; padding: 0; } .clearfix { zoom: 1; /*為IE6，7的兼容性設(shè)置*/ } .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; } .demo { /*左半圓*/ position: absolute; /*clip 屬性剪裁絕對(duì)定位元素。也就是說(shuō)，只有 position:absolute 的時(shí)候才是生效的。*/ 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>css3的clip 方法剪裁實(shí)現(xiàn)半圓</h2><br /> <p style="color: red;"> clip 屬性剪裁絕對(duì)定位元素。也就是說(shuō)，只有 position:absolute 的時(shí)候才是生效的。 唯一合法的形狀值是：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>
效果圖：
推薦學(xué)習(xí)：《css視頻教程》
