用CSS3的box-reflect设置文字倒影效果的方法讲解


Posted in HTML / CSS onMarch 07, 2016

语法:

CSS Code复制内容到剪贴板
  1. box-reflect:none | <direction> <offset>? <mask-box-image>?   
  2. <direction> = above | below | left | rightright  
  3. <offset> = <length> | <percentage>   
  4. <mask-box-image> = none | <url> | <linear-gradient> | <radial-gradient> | <repeating-linear-gradient> | <repeating-radial-gradient>  

    默认值:none
    适用于:所有元素
    继承性:无

取值:
    none:无倒影
    <direction> Demo: 简单图片倒影 See with Webkit
    above:指定倒影在对象的上边
    below:指定倒影在对象的下边
    left:指定倒影在对象的左边
    right:指定倒影在对象的右边
    <offset> Demo: 图片与倒影间隔 See with Webkit
    <length>:用长度值来定义倒影与对象之间的间隔。可以为负值
    <percentage>:用百分比来定义倒影与对象之间的间隔。可以为负值
    <mask-box-image> Demo: 更真实的图片倒影 文字倒影与渐变 See with Webkit
    none:无遮罩图像
    <url>:使用绝对或相对地址指定遮罩图像。
    <linear-gradient>:使用线性渐变创建遮罩图像。
    <radial-gradient>:使用径向(放射性)渐变创建遮罩图像。
    <repeating-linear-gradient>:使用重复的线性渐变创建背遮罩像。
    <repeating-radial-gradient>:使用重复的径向(放射性)渐变创建遮罩图像。

如果你需要一个简单倒影,你可以这样做:
代码

CSS Code复制内容到剪贴板
  1. box-reflect: below;  

效果
用CSS3的box-reflect设置文字倒影效果的方法讲解

注意设置倒影元素的padding是会影响倒影位置的
<offset>允许你定义倒影与元素之间的距离:
代码

CSS Code复制内容到剪贴板
  1. box-reflect: below 10px;  

效果
用CSS3的box-reflect设置文字倒影效果的方法讲解

<mask-box-image>允许你用Gradient图像或image作为遮罩:
代码

CSS Code复制内容到剪贴板
  1. box-reflect: below 1px linear-gradient(transparent,transparent 50%,rgba(0,0,0,.3));  

效果
用CSS3的box-reflect设置文字倒影效果的方法讲解

HTML / CSS 相关文章推荐
CSS中一些@规则的用法小结
Mar 09 HTML / CSS
灵活运用CSS3特性绘制简易版围棋效果
Sep 28 HTML / CSS
布局和排版教程 纯css3实现图片三角形排列
Oct 17 HTML / CSS
css3实现3D文本悬停改变效果的示例代码
Jan 16 HTML / CSS
Android本地应用打开方法——通过html5写连接
Mar 11 HTML / CSS
使用HTML5原生对话框元素并轻松创建模态框组件
Mar 06 HTML / CSS
详解HTML5中的manifest缓存使用
Sep 09 HTML / CSS
HTML5中使用json对象的实例代码
Sep 10 HTML / CSS
手对手的教你用canvas画一个简单的海报的方法示例
Dec 10 HTML / CSS
amaze ui 的使用详细教程
Aug 19 HTML / CSS
基于CSS3画一个iPhone
Apr 21 HTML / CSS
在CSS中使用when/else的方法
Jan 18 HTML / CSS
CSS3哪些新特性值得称赞
Mar 02 #HTML / CSS
基于DOM+CSS3实现OrgChart组织结构图插件
Mar 02 #HTML / CSS
基于CSS3实现立方体自转效果
Mar 01 #HTML / CSS
CSS3中几个新增加的盒模型属性使用教程
Mar 01 #HTML / CSS
使用CSS3实现多列布局与多背景的技巧
Feb 29 #HTML / CSS
详解CSS3 Media Queries中媒体属性的使用
Feb 29 #HTML / CSS
CSS3媒体查询Media Queries基础学习教程
Feb 29 #HTML / CSS
You might like
一个显示天气预报的程序
2006/10/09 PHP
php5新改动之短标记启用方法
2008/09/11 PHP
PHP中使用数组实现堆栈数据结构的代码
2012/02/05 PHP
解析link_mysql的php版
2013/06/30 PHP
PHP读取RSS(Feed)简单实例
2014/06/12 PHP
php生成4位数字验证码的实现代码
2015/11/23 PHP
php array_values 返回数组的值实例详解
2016/11/17 PHP
php设计模式之适配器模式原理、用法及注意事项详解
2019/09/24 PHP
jQuery实现鼠标移到元素上动态提示消息框效果
2013/10/20 Javascript
js获取当前时间显示在页面上并每秒刷新
2014/12/24 Javascript
jQuery实现防止提交按钮被双击的方法
2015/03/24 Javascript
AngularJS基础 ng-mouseleave 指令详解
2016/08/02 Javascript
ES6 Promise对象概念与用法分析
2017/04/01 Javascript
ES6教程之for循环和Map,Set用法分析
2017/04/10 Javascript
JS实现table表格内针对某列内容进行即时搜索筛选功能
2018/05/11 Javascript
在 Vue.js中优雅地使用全局事件的方法
2019/02/01 Javascript
vue中添加与删除关键字搜索功能
2019/10/12 Javascript
详解vue中v-bind:style效果的自定义指令
2020/01/21 Javascript
vue父子模板传值问题解决方法案例分析
2020/02/26 Javascript
js实现时钟定时器
2020/03/26 Javascript
Vue 使用typescript如何优雅的调用swagger API
2020/09/01 Javascript
[52:02]完美世界DOTA2联赛PWL S2 FTD.C vs SZ 第一场 11.27
2020/11/30 DOTA
Python实现将罗马数字转换成普通阿拉伯数字的方法
2017/04/19 Python
几种实用的pythonic语法实例代码
2018/02/24 Python
Django 实现外键去除自动添加的后缀‘_id’
2019/11/15 Python
VSCode配合pipenv搞定虚拟环境的实现方法
2020/05/17 Python
Python logging日志库空间不足问题解决
2020/09/14 Python
xml有哪些解析技术?区别是什么
2016/04/26 面试题
Solaris操作系统的线程机制
2015/07/28 面试题
实习指导老师评语
2014/04/26 职场文书
机关干部四风问题自查报告及整改措施
2014/10/26 职场文书
车辆管理制度范本
2015/08/05 职场文书
出纳2015年度工作总结范文
2015/10/14 职场文书
Java8中Stream的一些神操作
2021/11/02 Java/Android
SQL Server2019安装的详细步骤实战记录(亲测可用)
2022/06/10 SQL Server
HTML中link标签属性的具体用法
2023/05/07 HTML / CSS