CSS倒影
2017-01-11 00:16
162 查看
前面的话
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>(可选)用来设置倒影的遮罩效果,可以是背景图片,也可以是渐变生成的背景图像
DEMO
相关文章推荐
- 关于 CSS 反射倒影的研究思考
- 兼容各浏览器的CSS倒影效果
- 【荐】JS+CSS防FLASH效果带倒影的图片切换效果代码
- 谈谈一些有趣的CSS题目(四)-- 从倒影说起,谈谈 CSS 继承 inherit
- CSS-实现的倒影的效果
- CSS实现倒影-------Day80
- CSS网页特效--倒影
- CSS属性之box-reflect(倒影)
- 倒影效果简单css实现
- css倒影效果之 CSS3 box-reflect
- CSS 倒影效果
- CSS图片倒影效果兼容firefox、IE等各主流浏览器
- CSS实现倒影-------Day80
- 根据判断浏览器类型屏幕分辨率自动调用不同CSS的代码
- 欲练CSS ,必先解决IE的一些细节分析
- CSS中的margin属性
- CSS命名规范参考及书写注意事项
- CSS实现各行变色。
- css之position
- ASP.NET MVC 4 RC的JS/CSS打包压缩功能