本文介绍了HTML5中如何给图形添加阴影效果，包括设置阴影在X轴和Y轴的延伸距离、模糊度以及颜色。通过实例展示了不同阴影属性的应用，如向左或向右偏移，以及调整透明度来改变阴影的视觉效果。阴影在网页设计中常用于提升元素的立体感和层次感。
在 HTML5 中，我们除了上一节讲过的可以对图形设置平移、旋转、缩放，还可以给图形添加阴影效果。添加阴影的时候只需要利用图形上下文对象的几个关于阴影绘制的属性就可以实现啦。
图形阴影绘制的属性
| 属性 | 描述 |
|---|---|
| shadowOffsetX | 阴影的横向位移量 |
| shadowOffsetY | 阴影的纵向位移量 |
| shadowBlur | 阴影的模糊范围 |
| shadowColor | 阴影的颜色 |
shadowOffsetX 属性和 shadowOffsetY 属性分别用于设置阴影在 X 轴和 Y 轴的延伸距离，属性值为正值表示向下或向右延伸，负值表示向上或向左延伸。
shadowBlur 属性用于设置阴影的模糊度，当我们不希望图形的阴影太清晰时，可以使用这个属性。属性值为必须为正值，否则无效哟，一般设定在 0到10 之间。
shadowColor 属性值用于设置阴影的颜色，属性值可以为任意标准的 CSS 颜色值，默认颜色为黑色。
给图形绘制阴影
例如给一个粉色的矩形绘制阴影。
示例：
绘制向右偏移 10 像素的阴影：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5学习(9xkd.com)</title>
</head>
<body
最低0.47元/天 解锁文章
扫一扫
2462
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
