CSS 如何使用 text-shadow 和 box-shadow 阴影效果

CSS 文字阴影 text-shadow

CSS text-shadow 属性为文本添加阴影。

语法

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

注意： text-shadow属性连接一个或更多的阴影文本。属性是阴影，指定的每2或3个长度值和一个可选的颜色值用逗号分隔开来。已失时效的长度为0。

值	描述
h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊的距离。
color	可选。阴影的颜色。参阅 CSS 颜色值。

最简单的用法是只指定水平阴影（2px）和垂直阴影（2px）：

接下来，为阴影添加颜色：

 然后，向阴影添加模糊效果：

下面的例子展示了带有黑色阴影的白色文本：

 下面的例子展示了红色的霓虹发光阴影：

多个阴影

如需在文本中添加多个阴影，您可以添加以逗号分隔的阴影列表。

下面的例子展示了红色和蓝色的霓虹灯发光阴影：

下面的例子展示了带有黑色、蓝色和深蓝色阴影的白色文本：

 还可以使用 text-shadow 属性在文本周围创建纯边框（无阴影）：

 CSS box-shadow 

box-shadow 属性应用阴影于元素。

语法

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

注意：boxShadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表，每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。

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

参数解释：

• offset-x：必需，取值正负都可。offset-x水平阴影的位置。
• offset-y：必需，取值正负都可。offset-y垂直阴影的位置。
• blur:可选，只能取正值。blur-radius阴影模糊半径，0即无模糊效果，值越大阴影边缘越模糊。
• spread：可选，取值正负都可。spread代表阴影的周长向四周扩展的尺寸，正值，阴影扩大，负值阴影缩小。
• color:可选。阴影的颜色。如果不设置，浏览器会取默认颜色，通常是黑色，但各浏览器默认颜色有差异，建议不要省略。可以是rgb(250,0,0)，也可以是有透明值的rgba(250,0,0,0.5)。
• inset:可选。关键字，将外部投影(默认outset)改为内部投影。inset 阴影在背景之上，内容之下。
   

最简单的用法是只指定水平阴影和垂直阴影：

 接下来，为阴影添加颜色：

 接下来，向阴影添加模糊效果：

卡片阴影效果：

CSS 阴影属性

属性	描述
box-shadow	向一个元素添加一个或多个阴影。
text-shadow	在文本中添加一个或多个阴影。