如何用CSS的box-shadow 20s画一个简单的月亮

Css 无标签 2019-12-6 阅读:362

月亮
MDN上box-shadow说明

box-shadow 属性用于在元素的框架上添加阴影效果 ,该属性可设置的值包括,X偏移,Y偏移,阴影模糊半径,阴影扩散半径,和阴影颜色并以多个逗号分隔。

掘金 (一个帮助开发者成长的社区)的时候看到一条沸点摸鱼的时候用box-shadow画月亮,还能这样玩???

掘金沸点

看了代码后,这么简单?为什么自己没想到(还不是自己菜嘛~菜就菜了怎么了,我就没想到我怎么了....)

菜就要多学

box-shadow用法
语法:

box-shadow: offset-x offset-y blur spread color inset;
box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展] [阴影颜色] [内阴影];

参数解释:

  • offset-x:必需,取值正负都可。offset-x水平阴影的位置。
  • offset-y:必需,取值正负都可。offset-y垂直阴影的位置。
  • blur:可选,只能取正值。blur-radius阴影模糊半径,0即无模糊效果,值越大阴影边缘越模糊。
  • spread:可选,取值正负都可。spread代表阴影的周长向四周扩展的尺寸,正值,阴影扩大,负值阴影缩小。
  • color:可选。阴影的颜色。如果不设置,浏览器会取默认颜色,通常是黑色,但各浏览器默认颜色有差异,建议不要省略。可以是rgb(250,0,0),也可以是有透明值的rgba(250,0,0,0.5)。
  • inset:可选。关键字,将外部投影(默认outset)改为内部投影。inset 阴影在背景之上,内容之下。

注意:inset 可以写在参数的第一个或最后一个,其它位置是无效的。

开始画月亮

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

/* 天黑请闭眼...最近狼人杀玩多了 */
body {
    background: #000;
}

.moon {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    box-shadow: 40px 40px 0 0 #FFFDD2;
}

月亮画好了

月亮

通过调整box-shadow的offset-x和offset-y可以设置月亮的大小和角度,blur设置月亮边缘模糊,color还可以设置月亮颜色

以上内容参考:

0条评论