应用视觉设计：「28」使用 CSS 创建新月图形

路条编程 2020-09-13

532

欢迎关注路条编程的公众号，通过学习应用视觉设计这一系列文章，你将会逐步掌握页面版式、色彩、图形、动画和布局相关的基础知识。

今天我们要介绍的内容是使用 CSS 创建新月图形。通过使用不同的选择器和属性，可以制作有趣的形状。较容易尝试的一种是新月形。今天的文章中，将给大家介绍如何使用 box-shadow 设置元素阴影及 border-radius 属性控制元素圆角形状创建一个新月形。

首选创建一个带有透明背景的圆形对象，该阴影稍微偏向侧面，该阴影实际上就是你最终看到的新月形状。

在之前的文章中给大家介绍过如何创建圆形对象，为了创建圆形对象，border-radius 应将属性设置为 50％的值。

为了给圆形增加阴影效果，需要使用 box-shadow 属性。box-shadow 属性取值分别为 offset-x ，offset-y ，blur-radius ，spread-radius 和 color 的顺序值。该 blur-radius 和 spread-radius 值是可选的。

在文章 “应用视觉设计：「27」使用 CSS Transform 属性的 skewX 和 skewY 函数沿 X 和 Y 轴倾斜元素” 代码基础上，在页面 style 区增加相应样式类定义。首先，定义一个新月样式类 .moon ，将 background-color 属性设置为透明，然后将 border-radius 属性设置为 50％，以制作圆形。最后，设置 box-shadow 属性的 offset-x 值为 28px，offset-y 值为 12px，blur-radius 值为 0px，spread-radius 值为 0px，并将颜色设置为橙色的十六进制码 #FF790E， width 和 height 值各为 95px。增加新月样式类代码如下所示：

<style type="text/css">


   .moon { 
      width: 95px;
      height: 95px;
      background-color: transparent;
      border-radius: 50%;
      box-shadow: 28px 12px 0px 0px #FF790E;
    }
</style>

在 3 个倾斜圆角矩形后面增加新月形的 html 代码如下所示：

<li class="wide box-shadow" >


  <img src="../images/balloon4.jpg" alt="hot air balloon"  class="img-scale"/>


  <div class="mt-10 div-skew">
      <div class="div-original">
        <div class="div-skew-box div-box-1">矩形 1</div>
    </div>


    <div class="div-original">
        <div class="div-skew-box div-box-2">矩形 2</div>
    </div>


    <div class="div-original">
        <div class="div-skew-box div-box-3">矩形 3</div>
    </div>


    <div class="div-original">
      <div class="moon"></div>
    </div>
  </div>


</li>

保存页面，大家可以通过示例页面或下面的完整效果图比较下应用样式的效果，调整页面效果如下：

重要提示：示例效果预览，请访问 https://www.icoderoad.com , 完整代码查看及下载，请访问 https://github.com/icoderoad/demo。

今天就讲到这里，如果有问题需要咨询，大家可以直接留言或扫下方二维码关注公众号。也可以添加 happyzjp 微信受邀加入学习社群，我们会尽力为你解答。

作者：路条编程（转载请获本公众号授权，并注明作者与出处）

数据库

文章转载自路条编程，如果涉嫌侵权，请发送邮件至：contact@modb.pro进行举报，并提供相关证据，一经查实，墨天轮将立刻删除相关内容。

应用视觉设计：「28」使用 CSS 创建新月图形

评论