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 单关投注什么意思 幸运28投注技巧 幸运28的计算方法 吉林快三精准计划图网站 鼎盛国际博彩合法吗 四川时时账号 球探体育比分手机版 推牌九压庄技巧 时时彩改欢乐生肖 金钱艇快三娱乐平台 相关推荐:北京pk10高手计划群 二八杠生死活门口诀 后三组胆是什么玩法 东财app 安徽时时计划软件qq 足球直播360