css做半圓的方法

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

專注于為中小企業(yè)提供成都網(wǎng)站制作、網(wǎng)站設計服務,電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)浦口免費做網(wǎng)站提供優(yōu)質(zhì)的服務。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了數(shù)千家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設實現(xiàn)規(guī)模擴充和轉(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)設為寬度（width）的一半，并且只設置左上角和右上角的圓角半徑與元素的高度一致，而右下角和左下角的圓角半徑設置為0。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<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;
}
h3 {
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>
<h3>用border-radius實現(xiàn)半圓</h3>
<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>

效果圖：

css做半圓的方法

2、使用clip屬性畫半圓

clip 屬性剪裁絕對定位元素。

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

說明

這個屬性用于定義一個剪裁矩形。對于一個絕對定義元素，在這個矩形內(nèi)的內(nèi)容才可見。出了這個剪裁區(qū)域的內(nèi)容會根據(jù) overflow 的值來處理。剪裁區(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的兼容性設置*/
}
.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;
}
h3 {
margin-top: 20px;
}
.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>
<h3>css3的clip 方法剪裁實現(xiàn)半圓</h3><br />
<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>

效果圖：

css做半圓的方法

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

標題名稱：css做半圓的方法
標題網(wǎng)址：http://muchs.cn/article18/jpejdp.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站排名、企業(yè)網(wǎng)站制作、搜索引擎優(yōu)化、建站公司、網(wǎng)站設計公司、網(wǎng)站策劃

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容