我正在参加 码上掘金体验活动，详情：show出你的创意代码块

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第1天，点击查看活动详情。

code.juejin.cn/pen/7086842…

前言

text-shadow文字阴影样式虽然在平时经常使用，但是说实话自己并没有认真的了解过这个CSS样式的属性，这次趁着活动的时机，好好的了解下这个CSS的样式的使用，权作记录，以备平时查阅使用。如果你觉得我写的不错，希望能给我点个赞，感谢各位的阅读。

text-shadow 介绍

text-shadow属性可以为文本添加阴影效果，通过设置x方向和Y方向的偏移量，模糊半径和颜色值设置阴影效果。

• 基本语法

  text-shadow: 2px 2px #ff0000;
  

• 语法说明

  text-shadow: offset-x offset-y blur-radius color;
  
  offset-x: 必需 水平阴影的位置。 允许负值
  offset-y: 必需 垂直阴影的位置。 允许负值
  blur-radius: 可选 模糊的距离
  color: 可选 阴影的颜色 
  

• 兼容性

  标题	谷歌	edge	火狐	safari
  text-shadow	4.0	10.0	3.5	4.0

简单例子

模糊效果

白色文字效果

多重阴影

如

text-shadow: 0 8px 9px #c4b59d, 0px -2px 1px #fff;

多重阴影的使用可以达到很多我们意想不到的效果

   text-shadow: -1px -1px 0 #fff,1px 1px 0 #333,1px 1px 0 #444;

描边效果