首页 > web前端 > css教程 > 正文

CSS倒影

高洛峰
发布: 2017-02-23 10:03:30
原创
1596 人浏览过

前面的话

  CSS倒影目前只有chrome和safari浏览器支持,且需要添加-webkit-前缀。本文将详细介绍CSS倒影box-reflect

 

语法

-webkit-box-reflect

初始值: none

应用于: 块级元素(包括inline-block)

继承性: 无

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

  <direction>(必须)表示box-reflect生成倒影的方向,主要包括以下几个值:

above:表示生成的倒影在对象(原图)的上方;
below:表示生成的倒影在对象(原图)的下方;
left:表示生成的倒影在对象(原图)的左侧;
right:表示生成的倒影在对象(原图)的右侧;
登录后复制

  <offset>(可选)用来设置生成倒影与对象(原图)之间的间距,其取值可以是固定的像素值,也可以是百分比值

  <mask-box-image>(可选)用来设置倒影的遮罩效果,可以是背景图片,也可以是渐变生成的背景图像

 更多CSS倒影 相关文章请关注PHP中文网!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板