博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
CSS box-reflect倒影效果
阅读量:4131 次
发布时间:2019-05-25

本文共 599 字,大约阅读时间需要 1 分钟。

box-reflect

语法:

box-reflect:none |  ? ?

<direction> = above | below | left | right

<offset> =  | 

<mask-box-image> = none |  |  |  |  | 

默认值:none

适用于:所有元素

继承性:无

动画性:否

计算值:指定值

取值:

none:
无倒影

<direction> Demo:  See with Webkit

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

<offset> Demo:  See with Webkit

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

<mask-box-image> Demo:   See with Webkit

none:
无遮罩图像
使用绝对或相对地址指定遮罩图像。
使用线性渐变创建遮罩图像。
使用径向(放射性)渐变创建遮罩图像。
使用重复的线性渐变创建背遮罩像。
使用重复的径向(放射性)渐变创建遮罩图像。

说明:

设置或检索对象倒影。
  • 假设定义了 ,必须指定,否则可以省略
  • 对应的脚本特性为boxReflect

示例:

你看到倒影了么?

转自:

你可能感兴趣的文章
openlayers安装引用
查看>>
js报错显示subString/subStr is not a function
查看>>
高德地图js API实现鼠标悬浮于点标记时弹出信息窗体显示详情,点击点标记放大地图操作
查看>>
初始化VUE项目报错
查看>>
vue项目使用安装sass
查看>>
HTTP和HttpServletRequest 要点
查看>>
在osg场景中使用GLSL语言——一个例子
查看>>
关于无线PCB中 中50欧姆的特性阻抗的注意事项
查看>>
Spring的单例模式源码小窥
查看>>
后台服务的变慢排查思路(轻量级应用服务器中测试)
查看>>
MySQL中InnoDB事务的默认隔离级别测试
查看>>
微服务的注册与发现
查看>>
bash: service: command not found
查看>>
linux Crontab 使用 --定时任务
查看>>
shell编程----目录操作(文件夹)
查看>>
机器学习-----K近邻算法
查看>>
HBASE安装和简单测试
查看>>
关于程序员的59条搞笑但却真实无比的编程语录
查看>>
搞笑--一篇有趣的文章编译自一篇西班牙博客。有一位美丽的公主,被关押在一个城堡中最高的塔上,一条凶恶的巨龙看守着她,需要有一位勇士营救她…
查看>>
非常不错 Hadoop 的HDFS (Hadoop集群(第8期)_HDFS初探之旅)
查看>>