浅谈CSS3 box-reflect 属性
今天说一下 CSS3的box-reflect属性，也就是倒影特效。
语法：
用长度值来定义倒影与对象之间的间隔。可以为负值。用百分比来定义倒影与对象之间的间隔。可以为负值。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.box{
width:200px;
height:200px;
background:-webkit-linear-gradient(left,red,yellow,green);
transform:scale(-1,1);
-webkit-box-reflect:below 10px -webkit-linear-gradient(transparent,transparent 50%,rgba(0,0,0,.8));
}
</style>
</head> <body>
<div class="box"></div>
</body>
</html>
上面是颜色线性渐变的倒影，同样咱们的图片也可做倒影特效。
img{
-webkit-box-reflect:below 10px -webkit-linear-gradient(transparent,transparent 50%,rgba(0,0,0,.8));
}
基本就是这样，大家赶快试试吧。
下期预告，CSS3线性渐变的独特魅力，我是Daniel,请关注！
浅谈CSS3 box-reflect 属性的更多相关文章
- 浅谈CSS3中display属性的Flex布局
浅谈CSS3中display属性的Flex布局 最近在学习微信小程序,在设计首页布局的时候,新认识了一种布局方式display:flex 1 .container { 2 display: fle ...
- 浅谈 css3 box盒子模型以及box-flex的使用
display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂直等高.水平均分.按比例划分. 一.使 ...
- 浅谈css3有意思的属性pointer-events: none；
pointer-events: none: 可以让某个元素实现类似于海市蜃楼的效果,具体理解为,你可以看的到某个元素,但是你无法摸的着. 而display:none; 是你摸不着,但是你也看不见. ...
- 浅谈WPF依赖项属性
浅谈WPF依赖项属性 0. 引言 依赖项属性虽然在使用上和CLR属性一样,但是它是WPF特有的,不同于CLR属性.只是封装为我们常用CLR的属性,在语法使用上和CLR属性一样.WPF中一些功能:动画, ...
- 浅谈Vue中计算属性（computed）和方法（methods）的差别
浅谈Vue中计算属性(computed)和方法(methods)的差别 源码地址 methods方法和computed计算属性,两种方式的最终结果确实是完全相同 计算属性是基于它们的响应式依赖进行缓存 ...
- 浅谈CSS3 box-sizing 属性 有趣的盒模型
盒模型的组成大家肯定都懂,由里向外content,padding,border,margin. 盒模型是有两种标准的,一个是标准模型,一个是IE模型. 从上面两图不难看出在标准模型中,盒模型的宽高只是 ...
- 浅谈CSS3动画的凌波微步--steps()
背景 一日敲代码的我,得到一个需求:写一个10秒的倒计时. 用JavaScript定时器麻溜写完之后,恰好同事勇司机接完水.瞟了一眼,然后凑过来说,这个用CSS3也可以写,而且一行JavaScript ...
- 【分享】谈CSS3中display属性的flex布局
最近在学习微信小程序(重新学习微信小程序),在设计首页布局的时候,新认识了一种布局方式display:flex .guide-top{ height: 36%; display: flex; /*fl ...
- 浅谈css3长度单位rem，以及移动端布局技巧
rem是什么? rem是css3中新增加的一个单位属性(font size of the root element),根据页面的根节点的字体大小进行转变的单位.root!!!!!!!!!根节点,也就是 ...
随机推荐
- WinXP 无线技巧“区域没有通过无线网络中的发现”一个可能的原因!
貌似WinXP经典或无限.我一直沿用至今,我不知道这一天会放弃. 遇到的问题,也许有XP爱好者都遇到过还得看,写下一点文字注释.----------------------- 切割线 -------- ...
- JQuery的两个each方法的注意点
Jquery官网上两个each用法: http://api.jquery.com/jQuery.each/ http://api.jquery.com/each/ 使用时注意点 <!DOCTYP ...
- [转]Android与电脑局域网共享之：Samba Server
大家都有这样的经历,通过我的电脑或网上邻居访问另一台计算机上的共享资源,虽然电脑和手机之间可以有多种数据传输方式,但通过Windows SMB方式进行共享估计使用的人并不是太多,下面我就简单介绍一下, ...
- Roslyn 编译平台概述
在Language Feature Status上面看到,其实更新的并不是特别多,为了不会误导看了C# 6.0 功能预览 (一)的园友,现在把官方的更新列表拿了过来,供大家参考 C# 6.0 功能预览 ...
- IIS7.5下的httpModules设置
部署到IIS7.5上httpModule不起作用了,原来是iis7里面的网站应用程序池使用了默认的“集成模式”,所以所有的http请求处理都托管给了 IIS,web.config里面的配置就不起效了. ...
- IOS UI 第四篇：基本UI
ViewController 应用 再第一个XIB页面创建另一个XIB页面,并且通过按钮调用它 - (IBAction)GoSecond:(id)sender { secondVie ...
- Win 内存映射和堆栈
内存映射和堆栈 内存映射文件 内存映射文件可以用于3个不同的目的: 系统使用内存映射文件,以便加载和执行.exe和DLL文件.这可以大大节省页文件空间和应用程序启动运行所需的时间. 可以使用内存映射文 ...
- jquery 分页控件1
jquery 分页控件(一) 以前一直都是用别人的分页控件,虽然用得很爽,但总觉的还是自己写个小插件比较好,这个插件效果.代码等都有参照别人完成的控件.即便功能并不是那么完善,扩展性也不好,bug或许 ...
- PRML 第三章 - 线性回归
这段时间组里在有计划地学习书籍PRML (Pattern Recognition and Machine Learning),前两天自己做了一个里面第三章linear regression的分享,这里 ...
- C add
C++学习--应用篇(Windows/Linux)(书籍推荐及分享) 我将以平台划分,分别介绍Windows和Linux下个人认为的好书(与基础篇一样,大部分网络上都有电子版): 对于C++基础类的图 ...