CSS 彎彎的月亮效果

antzone發表於2019-06-06
CSS

分享一段程式碼例項，它實現了彎彎的月亮效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
#box{
  margin:20px auto;
  height:300px;
  width:300px;
  background-color:black;
  position:relative;
  overflow:hidden;
}
#box .a {
  width:150px;
  height:150px;
  border-radius:150px;
  background-color:white;
  position:absolute;
  top:0px;
  left:0px;
}
#box .b {
  width:150px;
  height:150px;
  border-radius:150px;
  background-color:black;
  position:absolute;
  left:40px;
}
</style>
</head>
<body>
<div id="box">
  <div class="a"></div>
  <div class="b"></div>
</div>
</body>
</html>

讓一個圓覆蓋另一個圓的一部分，就形成了一個月牙的形狀。

相關閱讀：

（1）.相對定位可以參閱CSS position:relative 相對定位一章節。

（2）.border-radius可以參閱CSS3 border-radius一章節。

相關文章