css阴影效果 学习笔记

box-shadow: 10px 20px 10px 10px #009999 inset;

h-shadow 必需的。水平阴影的位置。允许负值
v-shadow 必需的。垂直阴影的位置。允许负值
blur 可选。模糊距离
spread 可选。阴影的大小
color 可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
inset 可选。从外层的阴影（开始时）改变阴影内侧阴影

.shadow{
    width: 200px;
    height: 200px;
    box-shadow: 200px 200px 0px #009999;
}

1.模糊距离

box-shadow: 0px 0px 10px

这是10px的效果

这是100px的效果

2.阴影大小
如果不设值阴影就和原来一样大
设置为49px时：

3.inset
添加inset后原本向外的阴影会向内扩散

box-shadow: 0px 0px 22px 16px inset;

还可以添加加多个阴影，用逗号隔开。

box-shadow: 0 0px 116px #009999 inset,
 0px 0px 30px 4px yellow, 
 0px 2px 23px 57px red;

text-shadow：

text-shadow: 5px 4px 5px #888888;

这个属性将阴影赋给了文本，但只有4个参数，和边框阴影一样可以叠加。