CSS 阴影效果

CSS中，通过text-shadow、box-shadow两个属性分别为文本和元素添加阴影效果。

CSS语法

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

向元素添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。
h-shadow: 必需参数，可以为0。以元素左上角为原点，在X轴上的偏移量，可以设置正负值，代表在当前轴上正负方向的偏移量
v-shadow: 必需参数，可以为0。以元素左上角为原点，在Y轴上的偏移量，可以设置正负值，代表在当前轴上正负方向的偏移量
blur:可选参数，阴影模糊的距离，这个参数默认值为0，这时阴影的边缘部分非常尖锐
spread:可选参数，这个参数设置元素四个方向上阴影的尺寸
color:可选，阴影的颜色
inset:可选，将外部阴影（outset）改为内部阴影

text-shadow: h-shadow v-shadow blur color;

向文本添加一个或多个阴影。该属性是逗号分隔的阴影列表，每个阴影有两个或三个长度值和一个可选的颜色值进行规定。省略的长度是 0。
h-shadow: 必需。水平阴影的位置，可以为负值
v-shadow:必需。垂直阴影的位置，可以为负值
blur:可选，阴影模糊的距离
color:可选，阴影的颜色

简单示例

只指定水平阴影和垂直阴影

<style>
h1 {
  text-shadow: 2px 2px;
}
</style>
<h1>Hello world!</h1>

效果图：

给阴影添加颜色

<style>
h1 {
  text-shadow: 2px 2px red;
}
</style>
<h1>Hello world!</h1>

阴影添加模糊效果

<style>
h1 {
  text-shadow: 2px 2px 5px red;
}
</style>
<h1>Hello world!</h1>

同时添加多个阴影

<style>
h1 {
  text-shadow: 2px 2px 5px red, 2px 2px 5px green;
}
</style>
<h1>Hello world!</h1>

借助阴影属性给文字添加边框

<style>
h1 {
  text-shadow: -1px 0 red, 0 1px red, 1px 0 red, 0 -1px red;
}
</style>
<h1>Hello world!</h1>