CSS 彎彎的月亮效果

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

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

代碼實例如下:

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


鮮花

握手

雷人

路過

雞蛋

最新評論

返回頂部
大圣捕鱼2 下载马报图 足彩任选9开奖结果 上海时时乐乐 2000元压龙虎倍投技巧 福彩25选5玩法 特马历史开奖结果记录 免费最准特码资料 7码投注方案 内蒙古时时五d走势图 安徽时时号 十三码出特公式 赛车投注 天津时时走势图上银狐网 投注正码特是什么意思 四川时时真的吗 安徽时时有没有单双