HTML CSS text-shadow 和 box-shadow 阴影效果

HTML CSS 的阴影效果 text-shadow 和 box-shadow
通过使用 CSS，您可以在文本和元素上添加阴影。
属性：
text-shadow
box-shadow

CSS 文字阴影
CSS text-shadow 属性为文本添加阴影。
最简单的用法是只指定水平阴影（2px）和垂直阴影（2px），代码如下：

<style>
h1 {
  text-shadow: 2px 2px;
}
</style>
<h1>ZHUEi.COM</h1>

还可以给阴影添加颜色，代码如下：

<style>
h1 {
  text-shadow: 2px 2px red;
}
</style>
<h1>ZHUEi.COM</h1>

为阴影添加模糊效果，代码如下：

<style>
h1 {
  text-shadow: 2px 2px 5px red;
}
</style>
<h1>ZHUEi.COM</h1>

多个阴影
如需在文本中添加多个阴影，您可以添加以逗号分隔的阴影列表。
下面的例子展示了红色和蓝色的霓虹灯发光阴影，代码如下：

<style>
h1 {
  text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}
</style>

<h1>ZHUEi.COM</h1>

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

<style>
h1 {
  color: yellow;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
</style>

<h1>ZHUEi.COM</h1>

如果你发现错误或有其他见解，请给www.zhuei.com留言，我们会尽快更新本文！