CSS3 图片反射
在本章中，您将学习如何反射图像。
CSS图像反射
box-reflect 属性用于创建图像反射。
box-reflect 属性的值可以是：below、above、left 或 right。
浏览器支持
表中的数字指定完全支持该属性的第一个浏览器版本。
后跟-webkit的数字指定使用前缀的第一个版本。
| 属性 | |||||
|---|---|---|---|---|---|
| box-reflect | 4.0 -webkit- | 79.0 -webkit- | No | 4.0 -webkit- | 15.0 -webkit- |
在这里我们想向下反射图片：
<!DOCTYPE html><html><head><style>img {-webkit-box-reflect: below;}</style></head><body><h1>CSS 图片反射</h1><p>显示图像下方的反射:</p><img src="/znadmin/md/1302/0.png"></body></html>
在这里我们想向右反射图片：
<!DOCTYPE html><html><head><style>img {-webkit-box-reflect: right;}</style></head><body><h1>CSS 图片反射</h1><p>显示图像右边的反射:</p><img src="/znadmin/md/1302/0.png"></body></html>
CSS反射偏移
要指定图像和反射之间的间隙，请将间隙的大小添加到 box-reflect 属性。
实例
这里我们需要图片向下方的反射，偏移量为20px：
<!DOCTYPE html><html><head><style>img {-webkit-box-reflect: below 20px;}</style></head><body><h1>CSS 图片反射</h1><p>显示图片下方的反射，偏移20像素：</p><img src="/znadmin/md/1302/0.png"></body></html>
带渐变的 CSS 反射
我们还可以在反射上创建淡出效果。
实例
在反射上创建淡出效果：
<!DOCTYPE html><html><head><style>img {-webkit-box-reflect: below 0px linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.4));}</style></head><body><h1>CSS 图片反射</h1><p>用渐变显示反射（以产生淡出效果）:</p><img src="/znadmin/md/1302/0.png"></body></html>