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效果
注意:
- 默认的是外阴影(outset),但是不可以写这个单词,否则导致阴影无效。
- 盒子阴影不占用空间,不会影响其他盒子排列。
文字阴影
在CSS3中,我们可以使用text-shadow属性将阴影应用于文本。
语法:
text-shadow:h-shadow v-shadow blur color;
属性作用基本和盒子阴影一样。