参考手册
CSS3 径向渐变
CSS3 Box Shadow

CSS3 阴影效果(shadow)

Norway

Shadows 效果

用CSS你可以创建阴影效果！

鼠标移动到这里

CSS阴影效果

使用CSS，您可以向文本和元素添加阴影。

在这些章节中，您将了解以下属性：

  • 文本阴影
  • 方框阴影

CSS文本阴影

CSS文本阴影属性将阴影应用于文本。

在最简单的用法中，仅指定水平阴影（2px）和垂直阴影（2px）：

文本阴影效果!

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. h2 {
  6.   text-shadow: 2px 2px;
  7. }
  8. </style>
  9. </head>
  10. <body>
  12. <h2>文本阴影效果!</h2>
  14. </body>
  15. </html>
运行一下

接下来，换上另外一个颜色：

文本阴影效果!

  1. h2 {
  2.   text-shadow: 2px 2px red;
  3. }

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

文本阴影模糊效果!

  1. h2 {
  2.   text-shadow: 2px 2px 5px red;
  3. }

以下示例显示带黑色阴影的白色文本：

黑色阴影的白色文本!

  1. h2 {
  2.   color: white;
  3.   text-shadow: 2px 2px 4px #000000;
  4. }

以下示例显示了红色霓虹辉光阴影：

红色霓虹辉光阴影！

  1. h2 {
  2.   text-shadow: 0 0 3px #FF0000;
  3. }

多重阴影效果

要向文本中添加多个阴影，可以添加以逗号分隔的阴影列表。

以下示例显示了红色和蓝色霓虹辉光阴影：

红色和蓝色霓虹辉光阴影!

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. h2 {
  6.   text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
  7. }
  8. </style>
  9. </head>
  10. <body>
  12. <h2>红色和蓝色霓虹辉光阴影!</h1>
  14. </body>
  15. </html>
运行一下

以下示例显示带有黑色、蓝色和深蓝色阴影的白色文本：

文本多重阴影效果!

  1. h2 {
  2.   color: white;
  3.   text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
  4. }

也可以使用“文本阴影”属性在某些文本周围创建纯边框（无阴影）：

纯边框文本!

  1. h2 {
  2.   color: yellow;
  3.   text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
  4. }
CSS3 径向渐变
CSS3 Box Shadow

分类导航