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

CSS语法 box-shadow: h-shadow v-shadow blur spread color inset;

向元素添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。 h-shadow: 必需。水平阴影的位置，可以为负值 v-shadow:必需。垂直阴影的位置，可以为负值 blur:可选，阴影模糊的距离 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>

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。