box-shadow 总结归纳

1box-shadow外部阴影

1.1 x轴,y轴偏移量

• 第一,第二个参数是偏移值.阴影默认被元素覆盖.
• box-shadow: x轴偏移量 y轴偏移量;
• 以元素当前位置进行偏移

box-shadow: 100px 50px yellowgreen;

1.2 模糊阴影

• 第三个参数,模糊阴影
• 默认等于0
• 大于0时,模糊阴影并且扩散.
• 小于0时,阴影消失.

box-shadow: 100px 50px 10px yellowgreen;

box-shadow: 100px 50px 100px yellowgreen;

1.3 实体阴影的扩展与收缩

• 第四个参数,扩展或收缩阴影面积
• 默认等于0,阴影与元素面积相同
• 大于0时,模糊向外扩展
• 小于0时,影音向内收缩

box-shadow: 100px 50px 0  50px yellowgreen;

box-shadow: 100px 50px 0  -50px yellowgreen;

1.4 阴影颜色

• 阴影与外边距默认颜色是继承color色.

1.5外部阴影总结

• box-shadow 默认是外部阴影
• 默认阴影颜色继承字体颜色
• 默认位置是元素当前位置,被元素覆盖.
• 默认和元素大小相同.

box-shadow: x轴偏移 y轴偏移 模糊并扩展  阴影实体扩展或收缩  阴影颜色;

2box-shadow 内部阴影

2.1 x轴,y轴

• x轴,y轴向内填充

box-shadow: inset 50px 20px yellowgreen;

box-shadow: inset -50px -20px yellowgreen;

2.2 模糊阴影

box-shadow: inset 50px 20px 10px yellowgreen;

2.3 扩展或者收缩阴影

• 只有大于0时,会出现.
• 第四个参数在内部使用会与x,y轴偏移冲突.
• 建议单独使用.

box-shadow: inset 0 0 0 50px yellowgreen;