# box-shadow

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

box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展] [阴影颜色] [投影方式];

.desc {
  border: 5px solid LightCoral;
  box-shadow: 0 0 15px 5px;
  margin-bottom: 20px;
}
1
2
3
4
5

单词解释:blur:模糊 spread:伸展 inset:内凹

阴影和布局

  • 阴影不影响布局, 但是可能会覆盖其他 box 或者其他 box 的阴影。
  • 阴影不触发滚动条,也不增加滚动区域的大小。
  • 所以布局时可忽略阴影。
Last Updated: 3/4/2024, 3:06:40 PM