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. 从PEP-8学习Python编码风格

    (搬运自我在SegmentFault的博客) 关于空行 类与顶级函数(top-level function)的定义之间应当空两行. 类中的方法之间应当空一行. 方法中的逻辑部分之间可以空一行. 关于原 ...

  2. Android（java）学习笔记105：Android启动过程（转载）

    转载路径为: http://blog.jobbole.com/67931/ 1. 关于Android启动过程的问题: 当按下Android设备电源键时究竟发生了什么? Android的启动过程是怎么样 ...

  3. 禁止MySQL开机自动启动的方法

    这几天发现电脑卡机变慢了,还有一些卡,发现每次开机MySQL都会自动启动(明明我安装的时候选择了不开机自启,任务管理器启动列表中也没有,但就是自启了...) 1.打开服务列表 有两种方法,一是快捷键 ...

  4. 剑指offer24 二叉搜索树的后序遍历序列

    自己写的更简洁的代码 class Solution { public: bool VerifySquenceOfBST(vector<int> sequence) { int length ...

  5. python_95_类变量的作用及析构函数

    参考:http://www.cnblogs.com/alex3714/articles/5188179.html #类变量的用途:大家共有的属性,节省内存 class Person(): cn='Ch ...

  6. MAC OSXU盘会挂载目录

    当U盘接到系统后,你可以在Terminal里输入df -lh.这时,硬盘的使用和分区情况会输出,你在Mounted on 这一列数据中可以找到你的U盘或新添加的硬盘的挂载路径.

  7. 《剑指offer》56 数组中只出现一次的数字

    题目描述 一个整型数组里除了两个数字之外,其他的数字都出现了两次.请写程序找出这两个只出现一次的数字.   在线练习:https://www.nowcoder.com/practice/e02fdb5 ...

  8. 因 URL 意外地以“/HelloWorld”结束，请求格式无法识别。

    web.config文件中的 <system.web> 节点下加入:<webServices>    <protocols>        <add name ...

  9. 在2d游戏中常用的向量方式

    function cc.exports.VectorRotateByAngle(vector,angle)--计算向量旋转后的向量,angle:正数逆时针,负输顺时针 angle = angle*ma ...

  10. 协议(Protocol)与委托代理(Delegate)

    协议(Protocol)的作用: 1. 规范接口,用来定义一套公用的接口: 2. 约束或筛选对象. 代理(Delegate): 它本身是一种设计模式,委托一个对象<遵守协议>去做某件事情, ...