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. phar打包项目压力对比测试

    工具 http_load 测试url: http://api.test.chaoma.me/agent/ad/good_goods/query http://api.test.chaoma.me/ag ...

  2. ABAP和Java的单元测试Unit Test

    ABAP ABAP class单元测试的执行入口,CLASS_SETUP, 是硬编码在单元测试框架实现CL_AUNIT_TEST_CLASS里的. 待执行的单元测试方法通过CL_AUNIT_TEST_ ...

  3. iOS 骰子战争 Dice Wars

    占坑 这个游戏之前在网页端玩过,App Store 上没有搜到特别好的,想自己做个类似的iOS APP 游戏 目测实现难度适中,可玩性较高

  4. 【哈希 二分】bzoj2084: [Poi2010]Antisymmetry

    可以用manacher或者SA搞过去的:非常有趣的hash题 Description 对于一个01字符串,如果将这个字符串0和1取反后,再将整个串反过来和原串一样,就称作“反对称”字符串.比如0000 ...

  5. [CF] 180 E. Cubes

    对同类元素双指针扫描 #include<iostream> #include<cstring> #include<cstdio> #include<vecto ...

  6. C++图书馆管理系统项目中部分功能代码实现（书籍推荐）

    bool UserServiceImpl::Compare1(Book b1,Book b2)//按照借阅次数比较{ if(b1.GetCnt() > b2.GetCnt()) { return ...

  7. vue $emit子组件传出多个参数，如何在父组件中在接收所有参数的同时添加自定义参数

    Vue.js 父子组件通信的十种方式 前言 很多时候用$emit携带参数传出事件,并且又需要在父组件中使用自定义参数时,这时我们就无法接受到子组件传出的参数了.找到了两种方法可以同时添加自定义参数的方 ...

  8. 使用GD库做图片水印

    png图片作为水印加到其他类型图片后,背景变黑色 原因: imagecopy函数拷贝时可以保留png图像的原透明信息,而imagecopymerge却不支持图片的本身的透明拷贝. 然后直接上代码: / ...

  9. 图解Disruptor框架（一）：初识Ringbuffer

    图解Disruptor框架(一):初识Ringbuffer 概述 1. 什么是Disruptor?为什么是Disruptor? Disruptor是一个性能十分强悍的无锁高并发框架.在JUC并发包中, ...

  10. Spring Cloud构建微服务架构（三）消息总线

     注:此文不适合0基础学习者直接阅读,请先完整的将作者关于微服务的博文全部阅读一遍,如果还有疑问,可以再来阅读此文,地址:http://blog.csdn.net/sosfnima/article/d ...