一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第17天，点击查看活动详情。

前言

css3新增了很多属性，比如border-raduis（圆角）,transform（转换）, transition（过渡），box-shadow（盒子阴影），text-shadow,animation（动画），等等。

有些属性知道它的功能，但是只是偶尔用，所以用的时候还要去查文档。比如box-shadow，我知道是设置阴影的，但是它的值该怎么写，得查文档才知道。

今天通过这篇文章把box-shadow的用法讲一下。

属性

box-shadow

这个属性是用来设置盒子的阴影

box-shadow: offset-x offset-y blur-radius spread-radius color inset

offset-x：阴影在水平方向的偏移量，大于0是往右，小于0是往左，必传。
offset-y：阴影在垂直方向的偏移量，大于0是往下，小于0是往上，必传。
blur-radius: 阴影的模糊半径，默认是0（没有模糊半径）。
spread-radius：阴影的扩散半径，如果大于0，阴影向外扩散，小于0，则阴影往内缩小，默认是0
color：阴影的颜色。
inset：这个设置阴影的作用方向，默认阴影是向外，设置了inset后，阴影是向内。

box-shadow可以设置多组阴影，用逗号分隔。

下面看看例子：

<style>
  div {
    width: 100px;
    height: 100px;
    background-color: green;
    box-shadow: 5px 10px red;
  }
</style>

<div>box-shadow</div>

红色阴影在水平方向偏移了5px，垂直方向偏移了10px

设置模糊半径5px的阴影

box-shadow: 5px 10px 5px red;

设置扩散半径10px的阴影

box-shadow: 5px 10px 0px 10px red;

可以看到左边阴影是超出了5px,右边阴影超出了10px。上阴影刚好到边界，下阴影则到了20px。

设置向内偏移的阴影

box-shadow: 5px 10px red inset;

把div的绿色背景挤开了，水平是5px的偏移量，垂直是10px的偏移

设置向内扩散的阴影,并再向内扩散15px

 box-shadow: 5px 10px 0px 15px red inset;

左边是20px阴影，右边是10px阴影，上边是25px阴影，下边是5px阴影。

设置多个阴影,逗号分隔

    div {
      width: 100px;
      height: 100px;
      background-color: green;
      box-shadow: 5px 10px 5px red,
        5px 10px 0px 15px blue;
    }

多个阴影都是相对div定位的。

用box-shadow实现一个月亮

<style>
  body {
    margin-top: 30px;
    margin-left: 100px;
    background-color: black;
  }

  .moon {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    box-shadow: 35px 0px 5px yellow inset;
  }
</style>
<body>
  <div class="moon"></div>
</body>

感谢你的阅读。

css3的box-shadow属性

前言

属性

box-shadow

用box-shadow实现一个月亮