CSS 如何绘制一个弯弯的月亮效果呢?


摘要:
下文讲述css绘制“弯弯月亮效果”的方法分享,如下所示:


实现思路:
设置两个个元素
通过设置
border-radius 属性,然后进行拼接,达到显示一个月亮的效果

例:
css 制作一个弯弯的月亮

  
  <!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.maomao365.com/" />
<title>猫猫教程(www.maomao365.com)--css绘制弯弯月亮效果分享</title>
<style>
#container{
  margin:20px auto;
  height:300px;
  width:300px;
  background-color:black;
  position:relative;
  overflow:hidden;
}
#container .yueliang1 {
  width:180px;
  height:180px;
  border-radius:180px;
  background-color:white;
  position:absolute;
  top:0px;
  left:0px;
}
#container .yueliang2 {
  width:180px;
  height:180px;
  border-radius:180px;
  background-color:black;
  position:absolute;
  left:30px;
}
</style>
</head>
<body>
<div id="container">
  <div class="yueliang1"></div>
  <div class="yueliang2"></div>
</div>
</body>
</html>
css 绘制弯弯月亮的方法

css 绘制弯弯月亮的方法