CSS真好玩——用纯CSS画一轮新月

最新推荐文章于 2023-06-13 20:24:52 发布

EJoft

最新推荐文章于 2023-06-13 20:24:52 发布

阅读量323

点赞数

分类专栏：前端文章标签： css

本文链接：https://blog.csdn.net/EJoft/article/details/103812614

版权

前端专栏收录该内容

22 篇文章 0 订阅

订阅专栏

本篇博客依然是娱乐博客，案例搬运自 freeCodeCamp 就当代码写累时的消遣，供大家娱乐。

用CSS画一轮新月，基本的思路是用到 box-shadow这个属性，先画一个圆，在给圆添加阴影，我们的新月就成了，以下为示例与代码。

在这里插入图片描述

<style>
  .center {
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100px;
    height: 100px;
    background-color: transparent;
    border-radius: 50%;
    box-shadow: 25px 10px 0px 10px blue;
  }

</style>
<div class="center"></div>