1.只在webkit内核的浏览器上有效果

2.语法:

-webkit-box-reflect: <direction> <offset> <mask-box-image>

direction： 倒影偏移方向，有above、below、left和right四个值；
        offset： 倒影偏移原元素边框边缘的距离,单位可为px或者%；
        mask-box-image： 覆盖倒影的遮罩。

3.下面是demo：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>用-webkit-box-reflect 制作倒影</title>

    <style>

        .photo-reflection{

            cursor: pointer;

            width: 200px;

            height: 242px;

            margin: 20px auto;

        }

        /*-webkit-box-reflect: <direction> <offset> <mask-box-image>*/

        .photo-reflection img{

            -webkit-box-reflect:below 0 -webkit-gradient(linear, left top, left bottom,

            from(transparent), color-stop(0.1, transparent), to(white));

        }

        .text-reflection{

            margin-top: 240px;

            font-family:"Microsoft YaHei";

            color: rgba(250, 82, 117, 0.93);

            -webkit-box-reflect: below 1px -webkit-gradient(linear, 0 0, 0 100%,

            from(transparent), color-stop(0, transparent), to(rgba(3,3,3,.2)));

        }

    </style>

</head>

<body>

    <div class="photo-reflection">

        <img src="./qin_03.png">

        <div class="text-reflection"><p>民族舞泛指产生并流传于民</p></div>

    </div>

</body>

</html>

4.效果如下：

用-webkit-box-reflect制作倒影的更多相关文章

  1. background: inherit制作倒影、单行居中两行居左超过两行省略

    1.background: inherit;制作倒影 方法很多,但是我们当然要寻找最快最便捷的方法,至少得是无论图片怎么变化,div 大小怎么变化,我们都不用去改我们的代码. -webkit-box- ...

  2. Photoshop制作倒影的两种方法

    图片加了倒影,画面立刻变得生动起来.而用PS,制作倒影是如此的方便. 素材1 将素材1导入文档,ctrl+J复制图层,编辑-变换-垂直翻转将翻转的图层拖至下方 为翻转的图层添加图层蒙版,选中渐变工具, ...

  3. CSS3中制作倒影box-reflect

    目前仅在Chrome.Safari和Opera浏览器下支持 box-reflect:none | <direction> <offset>? <mask-box-imag ...

  4. 使用css制作倒影

    -webkit-mask 这个属性是相当强大的,所以详细的介绍超出了本文的范畴,它非常值得深入研究,因为它可以在实际应用中为你省掉很多时间. -webkit-mask让为一个元素添加蒙板成为可能,从而 ...

  5. 使用packer制作vagrant centos box

    使用packer制作vagrant box:centos 制作vagrant box,网上有教程,可以自己step by step的操作.不过直接使用虚拟在VirtualBox中制作vagrant b ...

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

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

  7. Flexbox制作CSS布局实现水平垂直居中

    Flexbox实现一个div元素在body页面中水平垂直居中: <!DOCTYPE html><html lang="en"><head>  & ...

  8. css3倒影

    使用CSS3制作倒影 img { -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from ...

  9. 使用Vagrant和VirtualBox一步步地创建一个Base Box

    box集合  http://www.vagrantbox.es/ Vagrant和VirtualBox软件的安装步骤省略,去官网下载最新的版本然后下一步下一步地安装就行了,和正常的安装软件没有什么区别 ...

随机推荐

  1. 弄了一个星期的wp 8.1，吐血的感觉

    看到8.1出来这么久了,心痒难耐,忍不住想重新把应用写一遍,于是上个星期开始动手,用的mvvm模式,结果一路下来,sqlce不能用了,那好吧,我用sqlite,webrequest变成httpclie ...

  2. 这些O2O比你们更靠谱儿

    本文纯属虚构,如有雷同,全是 C2C(Copy to China). 一 「什么社区 O2O,不就是跑腿儿的?那叮*小区不好好跑腿儿,非要搞什么狗屁社交,不是死了?」 三十四岁的老刘咽了口唾沫,接着跟 ...

  3. Java 守护线程（Daemon） 例子

    当我们在Java中创建一个线程,缺省状态下它是一个User线程,如果该线程运行,JVM不会终结该程序.当一个线被标记为守护线程,JVM不会等待其结束,只要所有用户(User)线程都结束,JVM将终结程 ...

  4. Unity runtime性能分析器

    一. Profiler: 1. CPU Usage A. WaitForTargetFPS: Vsync(垂直同步)功能所,即显示当前帧的CPU等待时间 B. Overhead: Profiler总体 ...

  5. maven,gradle本地缓存位置

    gradle: 配置系统环境变量GRADLE_USER_HOME即可,值为缓存位置. maven: 修改settings文件:maven的home路径下的conf文件夹下的settings.xml 对 ...

  6. cocostudio的bug（1）

    今天有个女同事问我一个问题,两个cocostudio的ui同时addChild到一个layer上面,高层级的ui设置visible为false,低层级的ui设置的visible设置为true,然后低层 ...

  7. 头文件string与string.h的区别

    在C++中,#include<iostream>与#include<iostream.h>的区别,前者要使用更新的编译器(其实大部分编译器多比较前卫了,出了有些搞嵌入式的用变态 ...

  8. windows10蓝屏page fault in nonpaged area

    Windows系统最让人头疼的问题就是蓝屏了,总是出现得那么莫名其妙,而且造成原因也是千奇百怪的.所以,对于电脑蓝屏,系统迷也无法一次性讲清楚.前天,我的电脑就经历过这样的蓝屏page fault i ...

  9. CentOs 6.5设置使用私钥登录关闭ssh的密码登录修改ssh默认端口

    使用SecureCRT工具创建RSA公钥和私钥 [选项]=>[会话选项] 然后在弹出对话框中选择[公钥]然后点击[属性]: 在弹出窗口中选中[使用会话公钥设置],点击[创建身份文件]按钮: 然后 ...

  10. Voyager的路由

    修改默认的后台登录路由 打开web.php,把prefix值改为你想设置的值,如back: Route::group(['prefix' => 'back'], function () { Vo ...