CSS box-reflect倒影效果

来源：互联网发布：dijkstra算法流程图编辑：程序博客网时间：2024/05/16 05:38

box-reflect

语法：

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

<direction> = above | below | left | right

<offset> = <length> | <percentage>

默认值：none

适用于：所有元素

继承性：无

动画性：否

计算值：指定值

取值：

none：: 无倒影

<direction>　Demo: 简单图片倒影 See with Webkit

above：: 指定倒影在对象的上边
below：: 指定倒影在对象的下边
left：: 指定倒影在对象的左边
right：: 指定倒影在对象的右边

<offset>　Demo: 图片与倒影间隔 See with Webkit

<length>：: 用长度值来定义倒影与对象之间的间隔。可以为负值
<percentage>：: 用百分比来定义倒影与对象之间的间隔。可以为负值

<mask-box-image>　Demo: 更真实的图片倒影文字倒影与渐变 See with Webkit

none：: 无遮罩图像
<url>：: 使用绝对或相对地址指定遮罩图像。
<linear-gradient>：: 使用线性渐变创建遮罩图像。
<radial-gradient>：: 使用径向(放射性)渐变创建遮罩图像。
<repeating-linear-gradient>：: 使用重复的线性渐变创建背遮罩像。
<repeating-radial-gradient>：: 使用重复的径向(放射性)渐变创建遮罩图像。

说明：

设置或检索对象倒影。

假设定义了 <mask-box-image>，<offset>必须指定，否则可以省略
对应的脚本特性为boxReflect。

示例：

<style>html,body{margin:50px 0;}.reflect{width:950px;margin:0 auto;-webkit-box-reflect:below 0 -webkit-linear-gradient(transparent,transparent 50%,rgba(255,255,255,.3));font:bold 100px/1.231 georgia,sans-serif;text-transform:uppercase;}</style></head><body><div class="reflect">你看到倒影了么？</div></body>

转自：http://www.css88.com/book/css/properties/only-webkit/box-reflect.htm

0 0

CSS box-reflect倒影效果

box-reflect

语法：

取值：

<direction> Demo: 简单图片倒影 See with Webkit

<offset> Demo: 图片与倒影间隔 See with Webkit

<mask-box-image> Demo: 更真实的图片倒影 文字倒影与渐变 See with Webkit

说明：

示例：

<direction>　Demo: 简单图片倒影 See with Webkit

<offset>　Demo: 图片与倒影间隔 See with Webkit

<mask-box-image>　Demo: 更真实的图片倒影文字倒影与渐变 See with Webkit