浅谈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!!!!!!!!!根节点,也就是 ...
随机推荐
- JavaScript一个类继承中实现
JavaScript类是默认原型对象继承: var Person = function() { this.name = "people"; this.hello = functio ...
- .NET简单企业应用
<.NET简单企业应用>项目开发环境 项目开始,开发团队需要构建一套开发环境,主要包含:开发工具.代码管理/版本控制系统.任务和Bug管理系统和持续集成(CI)系统.本文主要列举项目开发中 ...
- leetcode[90] Decode Ways
题目:如下对应关系 'A' -> 1 'B' -> 2 ... ‘Z’ -> 26 现在给定一个字符串,返回有多少种解码可能.例如:Given encoded message &qu ...
- 我的Android 4 学习系列
Android 简介 开始入手 创建应用程序和Activity 创建用户界面 Intent 和 Broadcast Revicever 使用 Internet 资源 文件,保存状态和首选项 数据库和C ...
- python进程池剖析（一）
python中两个常用来处理进程的模块分别是subprocess和multiprocessing,其中subprocess通常用于执行外部程序,比如一些第三方应用程序,而不是Python程序.如果需要 ...
- windows2008 配置安装FTP服务器
windows2008 配置安装FTP服务器 今天在服务器上开了IIS7,但是要求把一个附件文件夹拷贝到根目录下面,这个附件文件夹有2G多大小,直接用远程桌面映射,一直都拷贝不成功,而且本地缓存越来越 ...
- Html 导航
首页,来一个比较简单的例子热热身,相信有点css基础的人都可以看懂的.自所以,写一些教程,或许这样的教程已经泛滥啦,但是,还是想理理自己的思想来帮助自己及引导初学者更好的理解css. 1.竖直排列导航 ...
- 安装mysql-python报错:UnicodeDecodeError: 'ascii' codec can't decode byte 0xe2 in position 65: ordinal not in range(128)
安装mysql-python报错: UnicodeDecodeError: 'ascii' codec can't decode byte 0xe2 in position 65: ordinal n ...
- Code First 启用迁移时出错 HRESULT:0x80131040
问题:Enable-Migrations 使用“8”个参数调用“CreateInstanceFrom”时发生异常 (异常来自 HRESULT:0x80131040) PM> Enable-Mig ...
- Debian 7.1设置中文环境
之前在Chinaunix上看过一个人写过博客,是关于介绍Debian设置中文环境的,在这里我针对Debian 7来补全一下. Debian是非常经典而优秀的Linux发行版了,Debian是个很大的家 ...