用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的Border-radius轻松制作圆角
Dec 24 HTML / CSS
CSS3制作炫酷带方向感应的鼠标滑过图片3D动画
Mar 16 HTML / CSS
CSS3实现渐变背景兼容问题
May 06 HTML / CSS
HTML5 canvas基本绘图之绘制矩形
Jun 27 HTML / CSS
html5 canvas里绘制椭圆并保持线条粗细均匀的技巧
Mar 25 HTML / CSS
html5菜单折纸效果
Apr 22 HTML / CSS
HTML5进度条特效
Dec 18 HTML / CSS
HTML5实现多张图片上传功能
Mar 11 HTML / CSS
html5中的一些标签学习(心得)
Oct 18 HTML / CSS
Html5 canvas实现粒子时钟的示例代码
Sep 06 HTML / CSS
HTML5中外部浏览器唤起微信分享
Jan 02 HTML / CSS
HTML5页面音频自动播放的实现方式
Jun 21 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
基于curl数据采集之单页面采集函数get_html的使用
2013/04/28 PHP
WordPress中&quot;无法将上传的文件移动至&quot;错误的解决方法
2015/07/01 PHP
帝国cms目录结构分享
2015/07/06 PHP
php实现CSV文件导入和导出
2015/10/24 PHP
详解php中反射的应用
2016/03/15 PHP
jQuery晃动层特效实现方法
2015/03/09 Javascript
JS访问SWF的函数用法实例
2015/07/01 Javascript
基于jquery实现复选框全选,反选,全不选等功能
2015/10/16 Javascript
javascript实现不同颜色Tab标签切换效果
2016/04/27 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单的实现代码
2016/06/23 Javascript
JavaScript正则表达式替换字符串中图片地址(img src)的方法
2017/01/13 Javascript
AngularJS点击添加样式、点击变色设置的实例代码
2017/07/27 Javascript
通过示例彻底搞懂js闭包
2017/08/10 Javascript
详解VueJs中的V-bind指令
2018/05/03 Javascript
详解如何在webpack中做预渲染降低首屏空白时间
2018/08/22 Javascript
Vue 组件封装 并使用 NPM 发布的教程
2018/09/30 Javascript
vuejs数据超出单行显示更多,点击展开剩余数据实例
2019/05/05 Javascript
vue实现自定义H5视频播放器的方法步骤
2019/07/01 Javascript
Python常见数据结构详解
2014/07/24 Python
Python的另外几种语言实现
2015/01/29 Python
[原创]教女朋友学Python(一)运行环境搭建
2017/11/29 Python
Python if语句知识点用法总结
2018/06/10 Python
Python中asyncio与aiohttp入门教程
2018/10/16 Python
Pandas之排序函数sort_values()的实现
2019/07/09 Python
Python如何脚本过滤文件中的注释
2020/05/27 Python
Html5嵌入钉钉的实现示例
2020/06/04 HTML / CSS
移动端HTML5 input常见问题(小结)
2020/09/28 HTML / CSS
美国最便宜的旅游网站:CheapTickets
2017/07/09 全球购物
日本著名的服饰鞋帽综合类购物网站:MAGASEEK
2019/01/09 全球购物
英国著名的美容护肤和护发产品购物网站:Lookfantastic
2020/11/23 全球购物
学生会主席事迹材料
2014/01/28 职场文书
承认错误的检讨书
2014/01/30 职场文书
关键在于落实心得体会
2014/09/03 职场文书
领导干部贪图享乐整改措施
2014/09/21 职场文书
SQL实现LeetCode(176.第二高薪水)
2021/08/04 MySQL
JAVA springCloud项目搭建流程
2022/05/11 Java/Android