1. 语法
box-reflect:none | direction | offset | mask-box-image
- direction = above | below | left | right
- offset = length | percentage
- mask-box-image = none | url | linear-gradient | radial-gradient | repeating-linear-gradient | repeating-radial-gradient
取值 | 作用 |
---|---|
none | 无倒影 |
above | 指定倒影在对象的上边 |
below | 指定倒影在对象的下边 |
left | 指定倒影在对象的左边 |
right | 指定倒影在对象的右边 |
length | 用长度值来定义倒影与对象之间的间隔。可以为负值 |
percentage | 用百分比来定义倒影与对象之间的间隔。可以为负值 |
none | 无遮罩图像 |
url | 使用绝对或相对地址指定遮罩图像。 |
linear-gradient | 使用线性渐变创建遮罩图像。 |
radial-gradient | 使用径向(放射性)渐变创建遮罩图像。 |
repeating-linear-gradient | 使用重复的线性渐变创建背遮罩像 |
repeating-radial-gradient | 使用重复的径向(放射性)渐变创建遮罩图像。 |
注:假设定义了 mask-box-image,offset必须指定,否则可以省略
2. 栗子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html,
body {
margin: 100px;
}
.reflect {
width: 950px;
margin: 0 auto;
-webkit-box-reflect: below 0% -webkit-linear-gradient(transparent, transparent 50%, rgba(255, 255, 255, .3));
font: 80px bold;
}
</style>
</head>
<body>
<div class="reflect">帅 无需解释</div>
</body>
</html>