CSS 图像反射


目录

    显示目录


在本章中,您将学习如何反映图像。


CSS 图像反射

box-reflect 属性用于创建图像反射。

box-reflect 属性的值可以是:

below
above
left
right

浏览器支持

表中的数字指定完全支持该属性的第一个浏览器版本。

后面跟有 -webkit- 的数字指定使用的第一个版本 字首。

Property
box-reflect 4.0 -webkit- 79.0 -webkit- Not supported 4.0 -webkit- 15.0 -webkit-


例子

例子

这里我们想要图像下方的反射:

  img {
  -webkit-box-reflect: below;
} 

自己尝试一下 →

<!DOCTYPE html>
<html>
<head>
<style>
img {
  -webkit-box-reflect: below;
}
</style>
</head>
<body>

<h1>CSS Image Reflection</h1>

<p>Show the reflection below the image:</p>
<img src="img_tree.png">

</body>
</html>


例子

这里我们想要图像右侧的反射:

  img {
  -webkit-box-reflect: right;
} 

自己尝试一下→

<!DOCTYPE html>
<html>
<head>
<style>
img {
  -webkit-box-reflect: right;
}
</style>
</head>
<body>

<h1>CSS Image Reflection</h1>

<p>Show the reflection to the right of the image:</p>
<img src="img_tree.png">

</body>
</html>



CSS 反射偏移

要指定图像和反射之间的间隙,请添加 与 box-reflect 属性的间隙。

例子

这里我们想要图像下方的反射,偏移量为 20px:

  img {
  -webkit-box-reflect: below 20px;
} 

自己尝试一下→

<!DOCTYPE html>
<html>
<head>
<style>
img {
  -webkit-box-reflect: below 20px;
}
</style>
</head>
<body>

<h1>CSS Image Reflection</h1>

<p>Show the reflection below the image, with a 20 pixels offset:</p>
<img src="img_tree.png">

</body>
</html>



CSS 反射与渐变

我们还可以在反射上创建淡出效果。

例子

在反射上创建淡出效果:

  img {
  -webkit-box-reflect: below 0px linear-gradient(to bottom, rgba(0,0,0,0.0), 
   rgba(0,0,0,0.4));
} 

自己尝试一下 →

<!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 Image Reflection</h1>

<p>Show the reflection with gradient (to make a fade-out effect):</p>
<img src="img_tree.png">

</body>
</html>