CSS盒子模型-盒子阴影（重点）、文字阴影

CSS3中新增了盒子阴影，外卖可以使用box-shadow属性为盒子添加阴影。

语法：

box-shadow:h-shadow v-shadow blur spread color inset;

• h-shadow:必需。水平阴影的位置。必须赋值。
• v-shadow:必须。垂直阴影的位置。必须赋值。
• blur:可选。模糊距离。
• spread:可选。阴影的尺寸。
• color:可选。阴影的颜色。参考CSS颜色值。

• inset:可选。将外部阴影(outset)改为内部阴影。

  
  
  
  

  此处spead为10px，即为右方和下方都多出10px阴影。

inset效果

注意：

1. 默认的是外阴影(outset),但是不可以写这个单词，否则导致阴影无效。
2. 盒子阴影不占用空间，不会影响其他盒子排列。

文字阴影

在CSS3中，我们可以使用text-shadow属性将阴影应用于文本。

语法：

text-shadow:h-shadow v-shadow blur color;
属性作用基本和盒子阴影一样。