纯CSS3实现的阴影效果

在一个平淡无事的早晨，我偶然发现字体阴影的效果竟然如此引人注目，于是我决定亲手做一个简单的小demo来其魅力。

我们来做一个外字体阴影效果。HTML部分非常简单，只需要一个标签或者一个盒子就可以。例如，复制以下代码：

```html

```

接下来是CSS样式部分，我们将使用CSS3来编写样式。看下面这段代码：

```css

.demo11 {

border: 1px dashed f2b;

height: 150px;

width: 250px;

text-align: center;

line-height: 150px;

margin: 0 auto;

font-size: 50px;

color: orange;

text-shadow: / 这里定义了阴影效果 /

}

```

在这个样式中，我们使用了`text-shadow`属性来定义字体阴影效果。通过设定不同的偏移距离和颜色，我们可以得到不同的阴影效果。我们还可以调整字体样式（通过`font-family`属性）来获得更好的视觉效果。一个简单的字体阴影效果就制作完成了。

接下来，让我们尝试内阴影效果。HTML部分代码如下：

```html

```

对应的CSS样式如下：

```css

.block {

font-size: 2em; / 这里定义了字体大小 /

font-weight: bold; / 这里定义了字体粗细 /

margin: 2px; / 这里定义了外边距 /

padding: 2px; / 这里定义了内边距 /

border: solid AAA 1px; / 这里定义了边框样式 /

display: inline-block; / 这里定义了显示方式 /

}

.black { / 这里定义了内阴影颜色为黑色 /

text-shadow: / 这里定义了阴影效果 /

}

```

在这个样式中，我们使用`text-shadow`属性来实现内阴影效果。通过设定不同的颜色和偏移距离，我们可以得到不同的内阴影效果。同样地，我们还可以调整字体样式和背景色来获得更好的视觉效果。附上一张效果图供参考。这样，一个简单的内阴影效果就制作完成了。虽然效果可能不是非常惊艳，但在实际应用中却非常实用。希望这个小demo能帮助你理解字体阴影的制作过程。