前面的话

  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倒影的更多相关文章

  1. CSS3图片倒影技术实现及原理

    CSS3图片倒影技术实现及原理 目前为止我们已经探讨了很多CSS3中的新功能和新特征.除了上面这些,实际上还有很多CSS新属性并未包含进CSS3官方标准中,像谷歌浏览器或火狐浏览器等都会利用CSS的浏 ...

  2. 要什么 Photoshop,会这些 CSS 就够了

    标题党一时爽,一直标题党一直爽 还在上大学那会儿,我就喜欢玩 Photoshop.后来写网页的时候,由于自己太菜,好多花里胡哨的效果都得借助 Photoshop 实现,当时就特别希望 CSS 能像 P ...

  3. Matplotlib数据可视化(3):文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  4. 关于 CSS 反射倒影的研究思考

    原文地址:https://css-tricks.com/state-css-reflections 译者:nzbin 友情提示:由于演示 demo 的兼容性,推荐火狐浏览.该文章篇幅较长,内容庞杂,有 ...

  5. 谈谈一些有趣的CSS题目(四)-- 从倒影说起,谈谈 CSS 继承 inherit

    开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉 ...

  6. 从倒影说起,谈谈 CSS 继承 inherit(转)

    从倒影说起,谈谈 CSS 继承 inherit 给定一张有如下背景图的 div: 制作如下的倒影效果: 方法很多,但是我们当然要寻找最快最便捷的方法,至少得是无论图片怎么变化,div 大小怎么变化,我 ...

  7. 背景新增属性和css渐变及倒影

    背景新增属性和css渐变及倒影 一.background新增属性 background-size:指定对象的背景图像的尺寸大小. background:url() 0 0,url() 0 100%;多 ...

  8. 谈谈一些有趣的CSS题目-- 从倒影说起,谈谈 CSS 继承 inherit

      开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你 ...

  9. css 图片宽度、居中、倒影

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. Shell的学习就从重装系统开始吧

    小标题:与Fedora的爱恨情仇 干巴巴的shell学习实在枯燥,看来学习姿势还是要从实践入手 起因:传说中的不作死就不会死,昨晚偶遇一本PDF,讲glade编辑界面的,以下就被吸引了,跟着讲解搞出个 ...

  2. javascript 学习总结(四)Date对象

    1.Date.now() //Date.now() is in ECMAScript 5 //Prior to that, use +new Date() //获取当前时间 var now = (ty ...

  3. 非接触式电子音乐控制器CHIMAERA

    本篇文章,我将介绍个有意思的设备. 她就是Chimaera,一个基于电磁场效应的非接触式电子音乐控制器. <弹奏Chimaera的声音> 霍尔效应传感器阵列及其周围部件组成了一个连续的2D ...

  4. leetcode[86] Scramble String

    将一个单词按照这种方式分: Below is one possible representation of s1 = "great": great / \ gr eat / \ / ...

  5. Android 获取截图 并将其保存到本地sd在卡路径

    /** * 获取当前屏幕和保存截图 */ private void GetandSaveCurrentImage() { //1.构建Bitmap WindowManager windowManage ...

  6. 基于AngularJS的前端云组件最佳实践

    AngularJS是google设计和开发的一套前端开发框架,他能帮助开发人员更便捷地进行前端开发.AngularJS是为了克服HTML在构建应用上的不足而设计的,它非常全面且简单易学习,因此Angu ...

  7. 验证API

    验证API 本篇定位在数据入口的验证 普通的DataAnnotation验证 基于场景的DataAnnotation验证 可修改的外置式DataAnnotation验证 SUMMARY 最终调用时的用 ...

  8. C#通过模板导出Word(文字,表格,图片)

    C#通过模板导出Word(文字,表格,图片)   C#导出Word,Excel的方法有很多,这次因为公司的业务需求,需要导出内容丰富(文字,表格,图片)的报告,以前的方法不好使,所以寻找新的导出方法, ...

  9. elasticsearch文档-modules

    elasticsearch文档-modules modules 模块 cluster 原文 基本概念 cluster: 集群,一个集群通常由很多节点(node)组成 node: 节点,比如集群中的每台 ...

  10. sql基础篇

    再跟SQL谈一谈--基础篇   1.简介 2.DDL & DML 3.SELECT ①DISTINCT ②WHERE ③AND & OR ④ORDER BY 4.INSERT 5.UP ...