box-reflect:
举个栗子：
效果：
代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>box-reflect</title> </head> <style> .caption{ margin-top:50px; width:100%; text-align: center; box-reflect:below -4px linear-gradient(top,rgba(250,250,250,0),rgba(250,250,250,.0) 30%,rgba(250,250,250,.3)); -webkit-box-reflect: below -4px -webkit-linear-gradient(top,rgba(250,250,250,0),rgba(250,250,250,.0) 30%,rgba(250,250,250,.3)); } </style> <body> <div class="caption"> <h1>要个倒影</h1> </div> </body> </html>
属性介绍：
-webkit-box-reflect：none | ? ?
box-reflect:none | ? ?
属性说明： none：此值为默认值，表示无倒影； direction：生成倒影的方向 above：指定倒影在对象的上边 below：指定倒影在对象的下边 left：指定倒影在对象的左边 right：指定倒影在对象的右边 offset：图片与倒影间隔 length：用长度值来定义倒影与对象之间的间隔。可以为负值 percentage：用百分比来定义倒影与对象之间的间隔。可以为负值 mask-box-image：用来设置倒影的遮罩效果； 值可以是： none：无遮罩图像 url：使用绝对或相对地址指定遮罩图像。
linear-gradient：使用线性渐变创建遮罩图像。
radial-gradient：使用径向(放射性)渐变创建遮罩图像。
repeating-linear-gradient：使用重复的线性渐变创建背遮罩像。
repeating-radial-gradient：使用重复的径向(放射性)渐变创建遮罩图像。