box-shadow 及其应用

[nfssuzukaze]

1. box-shadow

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

• inset （可选，阴影在边框外或边框内）

  • 如果没有指定 inset ，则默认阴影在边框外
  • 如果指定是 inset ，则阴影在边框内

• offset-x 与 offset-y （必选，阴影的偏移量）<length>

  • offset-x ：正值向右偏移，负值向左偏移
  • offset-y ：正值向下偏移，负值向上偏移

• blur-radius （可选，模糊面积大小）<length> ，不能为负值

  • 若没有指定，则默认为 0
  • 值越大，模糊面积越大，阴影越淡

• spread-radius （在有 blur-radius 的前提下可选，扩展或缩小阴影的大小 ）<length>

  • 若是正值，则阴影的每边扩大 spread-radius
  • 若是负值，则阴影的每边缩小 spread-radius

• color （可选，阴影的颜色）

  • 默认为 color（字体颜色）

2. box-shadow 的应用

2.1 box-shadow 模拟 outline，并实现圆角效果

用 box-shadow 实现圆角的前提是 border 是圆角的

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

.box {
    background-color: grey;
    height: 40px;
    width: 600px;
    border-radius: 20px;
    box-shadow: 0 0 0 10px yellow; /*模拟 1px 的黄色圆角 outline*/
}

效果：