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. Ajax经典的面试题

    1.什么是AJAX,为什么要使用Ajax(请谈一下你对Ajax的认识)什么是ajax:AJAX是“Asynchronous JavaScript and XML”的缩写.他是指一种创建交互式网页应用的 ...

  2. 2018.5.13 oracle遇到的问题

    安装Oracle 11g 出现交换空间不够 在计算机那里右键打开属性进入高级系统设置然后找到第一个设置找到高级然后更改一下自定义范围(云服务器是16-10000) 然后确定 完成了. 快安装结束之后显 ...

  3. setTimeout,clearTimeout的一些好用法

    if(hidden != 1){ $.ui.showMask(); var _aaa = setTimeout(function(){ $.ui.hideMask(); },5000); } //be ...

  4. iOS应用架构谈part3 网络层设计方案

    前言 网络层在一个App中也是一个不可缺少的部分,工程师们在网络层能够发挥的空间也比较大.另外,苹果对网络请求部分已经做了很好的封装,业界的AFNetworking也被广泛使用.其它的ASIHttpR ...

  5. Caesars Cipher-freecodecamp算法题目

    Caesars Cipher(凯撒密码.移位密码) 要求 字母会按照指定的数量来做移位. 一个常见的案例就是ROT13密码,字母会移位13个位置.由'A' ↔ 'N', 'B' ↔ 'O',以此类推. ...

  6. PAT 乙级 1045

    题目 题目地址:PAT 乙级 1045 题解 本题的解法比较巧妙,刚开始的试着用暴力求解,果不其然时间超限…… 变换思路,既然对于每个元素来说满足的条件是前小后大,那么对数组排序,对应的位置相等的即为 ...

  7. PHP四种序列化方案

    原文地址:https://t.ti-node.com/thread/... 数据的序列化是一个非常有用的功能,然而目测很多人跟我一样,在刚接触这玩意的时候压根就不理解这货色到底是干啥用的,反正老师说了 ...

  8. 《Java并发编程实战》读书笔记一 -- 简介

    <Java并发编程实战>读书笔记一 -- 简介 并发的历史 并发的历史,也是人类利用有限的资源去提高生产效率的一个的例子. 设想现在有台计算机,这台计算机具有以下的资源: 单核CPU一个 ...

  9. navicat12.0.24破解方法，简单易操作，亲测可行

    navicat12.0.24 32bit 链接:https://pan.baidu.com/s/1dakPje0AzwE86p6ZRHfnsQ 密码:f1ve 破解文件 链接:https://pan. ...

  10. python列表中的深浅copy

    列表中的赋值和平常的赋值是不一样的,看下面的代码: In [1]: a = 1 In [2]: b = a In [3]: a Out[3]: 1 In [4]: b Out[4]: 1 In [5] ...