CSS-盒子阴影和文字阴影

1、盒子阴影：

盒子的阴影分内外阴影，默认情况是外阴影

• box-shadow：水平偏移 垂直偏移 模糊度 阴影扩展(影子大小) 阴影颜色 内外阴影
  内阴影取值（inset）
  外阴影取值（默认值，outset，注意：如果将outset写在代码中会没有效果，所以如果是外阴影可忽略不写）
• 可以简写成：box-shadow:10px 10px 10px;分别表示水平、垂直位移和模糊度（阴影的颜色默认和盒子的内容一致）

2、文字阴影

• text-shadow：水平偏移量 垂直偏移量 模糊度 阴影颜色
• 可以简写成：box-shadow:10px 10px 10px;分别表示水平、垂直位移和模糊度（默认情况下阴影颜色和文字颜色一致）
  可同时写多个，用逗号隔开：text-shadow：水平偏移量 垂直偏移量 模糊度 阴影颜色， 水平偏移量 垂直偏移量 模糊度 阴影颜色...

实现凹凸文字效果

image.png

原理：凸文字的特点是：字体的下侧和右侧呈暗，上侧和左侧呈亮，而凹文字则相反

• text-shadow: 1px 1px 1px black, -1px -1px 1px white;/凸文字/
• text-shadow: -1px -1px 1px black, 1px 1px 1px white;/凹文字/