用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 相关文章推荐
CSS3混合模式mix-blend-mode/background-blend-mode简介
Mar 15 HTML / CSS
用纯css3和html制作泡沫对话框实现代码
Mar 21 HTML / CSS
CSS3弹性盒模型开发笔记(二)
Apr 26 HTML / CSS
Css3新特性应用之形状总结
Dec 08 HTML / CSS
html5 sessionStorage会话存储_动力节点Java学院整理
Jul 06 HTML / CSS
仿CSDN Blog返回页面顶部功能实现原理及代码
Jun 30 HTML / CSS
HTML5 预加载让页面得以快速呈现
Aug 13 HTML / CSS
HTML5实现一个能够移动的小坦克示例代码
Sep 02 HTML / CSS
HTML5在canvas中绘制复杂形状附效果截图
Jun 23 HTML / CSS
使用HTML5 Canvas API控制字体的显示与渲染的方法
Mar 24 HTML / CSS
详解canvas绘图时遇到的跨域问题
Mar 22 HTML / CSS
css3新特性的应用示例分析
Mar 16 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
默默简单的写了一个模板引擎
2007/01/02 PHP
Smarty+QUICKFORM小小演示
2007/02/25 PHP
基于asp+ajax和数据库驱动的二级联动菜单
2010/05/06 PHP
PHP 防恶意刷新实现代码
2010/05/16 PHP
PHP实现适用于自定义的验证码类
2016/06/15 PHP
PHP判断是否是微信打开还是浏览器打开的方法
2019/02/27 PHP
JavaScript入门教程(9) Document文档对象
2009/01/31 Javascript
JQuery Easyui Tree的oncheck事件实现代码
2010/05/28 Javascript
js禁止document element对象选中文本实现代码
2013/03/21 Javascript
js点击返回跳转到指定页面实现过程
2020/08/20 Javascript
javaScript事件机制兼容【详细整理】
2016/07/23 Javascript
js+canvas实现动态吃豆人效果
2017/03/22 Javascript
微信小程序使用Promise简化回调
2018/02/06 Javascript
浅谈ajax请求不同页面的微信JSSDK问题
2018/02/26 Javascript
JavaScript 九种跨域方式实现原理
2019/02/11 Javascript
Vue项目中使用jquery的简单方法
2019/05/16 jQuery
微信小程序实现折线图的示例代码
2019/06/07 Javascript
layer.prompt使文本框为空的情况下也能点击确定的方法
2019/09/24 Javascript
[04:00]DOTA2解说界神雕侠侣 CJ第四天谷子现场过生日
2013/07/30 DOTA
python实现文件名批量替换和内容替换
2014/03/20 Python
python中的__init__ 、__new__、__call__小结
2014/04/25 Python
python利用微信公众号实现报警功能
2018/06/10 Python
python右对齐的实例方法
2020/07/05 Python
基于python实现简单C/S模式代码实例
2020/09/14 Python
python爬虫基础之urllib的使用
2020/12/31 Python
浅谈Html5移动端ios/Android兼容性总结
2018/06/01 HTML / CSS
关于VPN
2012/06/10 面试题
学院书画协会部门岗位职责
2013/12/01 职场文书
思想汇报格式
2014/01/05 职场文书
学习十八大报告感言
2014/02/28 职场文书
开学典礼主持词
2014/03/19 职场文书
双方协议书
2014/04/22 职场文书
食品安全承诺书范文
2014/08/29 职场文书
自荐信模板大全
2015/03/27 职场文书
2016年基层党组织公开承诺书
2016/03/25 职场文书
Nginx利用Logrotate实现日志分割
2022/05/20 Servers