效果地址:https://codepen.io/flyingliao/pen/LaRmJr?editors=1100
感想:还有缺陷,需后期补充、完善。
HTML code:
<div class="moon1"></div> <div class="moon2"></div>
CSS code:
html,body{ margin: 0; padding: 0; } /* 元素垂直水平居中 */ body{ height: 100vh; display: flex; justify-content: center; align-items: center; background-color: black; } div{ margin-right: 30px; }
.moon1{ width: 8em; height: 8em; border-radius: 50%; background-color: white; box-shadow: 0 0 20px white; }
.moon2{ position: relative; width: 8em; height: 8em; border-radius: 50%; background-color: white; box-shadow: 0 0 10px white; } /* 用伪元素::before 覆盖圆的一部分; 也就是让其和父元素一样大小,背景黑色,相对定位覆盖圆的右边那部分 */ /* 缺少内弧的光辉 */ .moon2::before{ content:''; width: 8em; height: 8em; border-radius: 50%; background-color: black; position: absolute; left: 2em; top: 0; z-index: 1; }