這篇文章主要介紹“css做半圓的方法”，在日常操作中，相信很多人在css做半圓的方法問題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”css做半圓的方法”的疑惑有所幫助！接下來，請(qǐng)跟著小編一起來學(xué)習(xí)吧！

專注于為中小企業(yè)提供成都網(wǎng)站制作、網(wǎng)站設(shè)計(jì)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)浦口免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了數(shù)千家企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

css做半圓的方法：1、使用border-radius畫半圓，語句如“border-radius: 50px 50px 0 0;”；2、使用clip屬性畫半圓，語句如“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。

用border-radius實(shí)現(xiàn)半圓

上邊圓
左邊圓
下邊圓
左邊圓
全圓

效果圖：

2、使用clip屬性畫半圓

clip 屬性剪裁絕對(duì)定位元素。

當(dāng)一幅圖像的尺寸大于包含它的元素時(shí)會(huì)發(fā)生什么呢？"clip" 屬性允許您規(guī)定一個(gè)元素的可見尺寸，這樣此元素就會(huì)被修剪并顯示為這個(gè)形狀。

說明

這個(gè)屬性用于定義一個(gè)剪裁矩形。對(duì)于一個(gè)絕對(duì)定義元素，在這個(gè)矩形內(nèi)的內(nèi)容才可見。出了這個(gè)剪裁區(qū)域的內(nèi)容會(huì)根據(jù) overflow 的值來處理。剪裁區(qū)域可能比元素的內(nèi)容區(qū)大，也可能比內(nèi)容區(qū)小。

示例：

css3的clip 方法剪裁實(shí)現(xiàn)半圓


clip 屬性剪裁絕對(duì)定位元素。也就是說，只有 position:absolute 的時(shí)候才是生效的。
唯一合法的形狀值是：rect (top, right, bottom, left)


左半圓
右半圓

效果圖：

到此，關(guān)于“css做半圓的方法”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！