CSS 繪製半圓

admin發表於2019-11-20
CSS

由於CSS3的出現繪製圓形是非常簡單輕鬆的事情。

並且由於計算機軟硬體的升級，基本上無需考慮相容性問題。

本文的最終目的是繪製一個半圓，首先通過CSS繪製一個整圓。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
div{
  width: 100px;
  height: 100px;
  background-color: blue;
  border-radius: 50px;
}
</style>
</head>
<body>
  <div></div>
</body>
</html>

上述程式碼繪製一個整圓，執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201911/20/091311itgmrk1fy3ebbrfm.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

下面給出繪製半圓的程式碼：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
div{
  width: 100px;
  height: 50px;
  background-color: blue;
  border-radius: 50px 50px 0 0;
}
</style>
</head>
<body>
  <div></div>
</body>
</html>

上述程式碼繪製了一個半圓，程式碼執行效果截圖如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
div{
  width: 100px;
  height: 50px;
  background-color: blue;
  border-radius: 50px 50px 0 0;
}
</style>
</head>
<body>
  <div></div>
</body>
</html>

上述程式碼繪製了一個半圓，程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201911/20/091420oex4h44db4hb14cc.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上面程式碼繪製了一個半圓，下面簡單介紹一下實現過程。

（1）.原始矩形的寬是100px，高是50px。

（2）.border-radius具有四個引數。

（3）.第一個50px規定左上角四分之一圓的水平半徑和垂直半徑尺寸。

（4）.第二個50px規定右上角四分之一圓的水平半徑和垂直半徑的尺寸。

（5）.兩個四分之一圓的半徑都是50px，合起來是100px，恰好是矩形的寬度。

（6）.左下部和右下部圓角沒有采用圓角，且高度是50px，所以左上角和右上角效果恰好延伸到底部。

（7）.最終生成一個半圓效果，具體原理參閱CSS border-radius一章節。

相關文章