CSS3 box-reflect:

浏览器参照基准:Webkit Only

语法:

box-reflect:none | <direction> <offset>? <mask-box-image>?

如果你需要一个简单倒影,你可以这样做:

代码
box-reflect: below;
效果
简单的文字倒影

* 注意设置倒影元素的padding是会影响倒影位置的

<offset>允许你定义倒影与元素之间的距离:

代码
box-reflect: below 10px;
效果
简单的文字倒影

<mask-box-image>允许你用Gradient图像或image作为遮罩:

代码
box-reflect: below 1px linear-gradient(transparent,transparent 50%,rgba(0,0,0,.3));
效果
简单的文字倒影
CSS探索之旅