您的位置:首頁> 實例代碼> CSS3實例

CSS 彎彎的月亮效果

2019-6-6 15:59| 作者: antzone| 查看: 7816| 評論: 0|來自: 螞蟻部落

分享一段代碼實例,它實現了彎彎的月亮效果。

代碼實例如下:

[HTML] 純文本查看 復制代碼运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.tlmhwf.tw/" />
<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一章節。


鮮花

握手

雷人

路過

雞蛋

最新評論

返回頂部
浙江6十1开奖号码查询r