用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+font字体文件实现圆形半透明菜单具体步骤(图解)
Jun 03 HTML / CSS
带有css3动画效果的兼容多浏览器简单导航条示例
Jan 26 HTML / CSS
使用CSS禁止textarea调整大小功能的方法
Mar 13 HTML / CSS
CSS超出文本指定宽度用省略号代替和文本不换行
May 05 HTML / CSS
利用CSS3动画实现圆圈由小变大向外扩散的效果实例
Sep 10 HTML / CSS
使用CSS3实现input多选框自定义样式的方法示例
Jul 19 HTML / CSS
html5 Canvas画图教程(10)—把面拆成线条模拟出圆角矩形
Jan 09 HTML / CSS
HTML5之SVG 2D入门3—文本与图像及渲染文本介绍
Jan 30 HTML / CSS
移动端Html5中百度地图的点击事件
Jan 31 HTML / CSS
canvas 橡皮筋式线条绘图应用方法
Feb 13 HTML / CSS
Html5移动端适配IphoneX等机型的方法
Jun 25 HTML / CSS
导出HTML5 Canvas图片并上传服务器功能
Aug 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
PHP开发文件系统实例讲解
2006/10/09 PHP
层叠菜单的动态生成
2006/10/09 PHP
PHP 文件上传源码分析(RFC1867)
2009/10/30 PHP
PHP实现异步调用方法研究与分享
2011/10/27 PHP
PHP实现简单搜歌的方法
2015/07/28 PHP
PHP命名空间与自动加载机制的基础介绍
2019/08/25 PHP
如何在Laravel5.8中正确地应用Repository设计模式
2019/11/26 PHP
JavaScript ( (__ = !$ + $)[+$] + ({} + $)[_/_] +({} + $)[_/_] )
2011/02/25 Javascript
document.createElement()用法
2013/03/13 Javascript
javascript抖动元素的小例子
2013/10/28 Javascript
jquery iframe操作详细解析
2013/11/20 Javascript
jquery datepicker参数介绍和示例
2014/04/15 Javascript
JavaScript实现关键字高亮功能
2014/11/12 Javascript
深入理解Java线程编程中的阻塞队列容器
2015/12/07 Javascript
实现JavaScript高性能的数据存储
2016/12/11 Javascript
JavaScript实现移动端轮播效果
2017/06/06 Javascript
浅谈vue实现数据监听的函数 Object.defineProperty
2017/06/08 Javascript
关于jQuery.ajax()的jsonp碰上post详解
2017/07/02 jQuery
jQuery中extend函数简单用法示例
2017/10/11 jQuery
React Native基础入门之调试React Native应用的一小步
2018/07/02 Javascript
详解在不使用ssr的情况下解决Vue单页面SEO问题
2018/11/08 Javascript
Angular2实现的秒表及改良版示例
2019/05/10 Javascript
vue.js的简单自动求和计算实例
2019/11/08 Javascript
python发送邮件示例(支持中文邮件标题)
2014/02/16 Python
Python之web模板应用
2017/12/26 Python
Python基于gevent实现文件字符串查找器
2020/08/11 Python
Pycharm 解决自动格式化冲突的设置操作
2021/01/15 Python
HTML5 Canvas实现烟花绽放特效
2016/03/02 HTML / CSS
美国百货齐全的精品网站,提供美式风格的产品:Overstock.com
2016/07/22 全球购物
国际象棋商店:The Chess Store
2018/07/09 全球购物
澳大利亚最大的在线美发和美容零售商之一:My Hair Care & Beauty
2019/08/24 全球购物
2014年向国旗敬礼活动总结
2014/09/27 职场文书
2015年感恩母亲节的演讲稿
2015/03/18 职场文书
原来闭幕词是这样写的呀!
2019/07/01 职场文书
python实现局部图像放大
2021/11/17 Python
MySQL三种方式实现递归查询
2022/04/18 MySQL