苏飞论坛

标题: css-绘制月牙 [打印本页]

---

作者: xyc    时间: 2021-7-10 14:51
标题: css-绘制月牙
      咱们继续之前说的css实现图形的效果方法，今天来说说月牙的实现方法。
      原理：由两条弧线组成的，每个弧线可以看成一个圆的一部分弧长，在圆的基础上让圆有一个阴影可以形成一个月牙。
      效果：
       (, 下载次数: 6)

上传

点击文件名下载附件
      HTML：
      

[HTML] 纯文本查看 复制代码

<div class="div"></div>

      css样式：
      

[CSS] 纯文本查看 复制代码

.div {

  width:80px;

  height:80px;

  float: left;

  background-color: #ffffff;

  border-radius:50%;

  box-shadow: 15px 15px 0 0 #9600d2;

}

     以上就是月牙的实现效果，后面会继续给大家说说css实现其他图形的样式方法。希望大家多多关注！

---

作者: 范范    时间: 2021-7-12 17:39
支持下

---

欢迎光临 苏飞论坛 (http://www.sufeinet.com/)

Powered by Discuz! X3.4