css3 box-reflect 倒影效果
用长度值来定义倒影与对象之间的间隔。可以为负值。用百分比来定义倒影与对象之间的间隔。可以为负值。
- 下面的示例定义一个简单的倒影样式，效果图如下：
css代码如下：
<style type="text/css">
img {
height:250px;
border:1px solid red;
-webkit-box-reflect:below;
}
</style>
html代码如下：
<body>
<img src="data:images/bg1.jpg" />
</body>
我们在上面的基础上继续改进，为倒影设置距离，向下偏移10像素，效果图如下：
改动的css代码：
<style type="text/css">
img {
height:250px;
-webkit-box-reflect:below 10px ;
}
</style>
接下来继续进行改进，设计css渐变倒影，通过渐变遮罩逐渐盖住下面的倒影，制作出渐隐效果。
css代码如下：
<style type="text/css">
img {
height:250px;
-webkit-box-reflect:below 5px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(white));
}
</style>
效果图：
【原文地址：http://blog.csdn.net/kevin_cyj/article/details/51599969】
css3 box-reflect 倒影效果的更多相关文章
- 浅谈 css3 box盒子模型以及box-flex的使用
display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂直等高.水平均分.按比例划分. 一.使 ...
- css3 box
一.box-shadow介绍 box-shadow属性向box添加一个或多个阴影. 语法: box-shadow: offset-x offset-y blur spread color inset; ...
- css3 Box model 与 Box-sizing
1.Box Model(盒模型) CSS中的Box Model分为两种:第一种是W3C的标准模型,另一种是IE的传统模型.它们的相同之处是对元素的width.height.padding.border ...
- HTML5/CSS3实现图片倒影效果
在线演示 本地下载
- 【转载】css3 content 生成内容
content一般和:before,:after一起使用,用来生成内容(img和input没有该属性),content的内容一般可以为以下四种: none: 不生成任何值. attr: 插入标签属性值 ...
- 12款有助于简化CSS3开发的工具
网站开发者能通过CSS3为网站设计增添很多时尚元素,CSS3 对CSS规范做了很大的改进.现在,本文将介绍12款有助于简化CSS3开发的工具. 1.CSS3 Pie: 允许在IE上使用CSS3绝大部 ...
- CSS3 用户界面
CSS3用户界面 在CSS3中,新的用户界面特性包括重设元素尺寸,盒尺寸以及轮廓等. 用户界面属性: resize box-sizing outline-offset 浏览器支持 属性 浏览器支持 r ...
- css3前端工具
随着CSS3的出现,CSS3讨论的话题越来越多了,现在各种教程也是多如牛毛,不比一年前的时候,找个资料要捞遍整个互联网,而且还很难找到自己需要的参考资料.从侧面也说明,CSS3对于前端工程师来说,越来 ...
- css3常用方法以及css3选择器
最重要的 CSS3 模块包括: 选择器 框模型 背景和边框 文本效果 2D/3D 转换 动画 多列布局 用户界面 CSS3 边框 CSS3 边框 通过 CSS3,您能够创建圆角边框,向矩形添加 ...
- CSS3总结学习（一）：CSS3用户界面
在CSS3中,新的用户界面属性有很多,本文重点介绍resize,box-sizing,offset. 浏览器支持,如下图,图片源于W3school 1.CSS Resizing 在css3,resiz ...
随机推荐
- C#简单实现贪吃蛇程序（LinQ + Entity）
做梦想起来的C#简单实现贪吃蛇程序(LinQ + Entity) 最近一直在忙着单位核心开发组件的版本更新,前天加了一个通宵,昨天晚上却睡不着,脑子里面突然不知怎的一直在想贪吃蛇的实现方法.以往也有类 ...
- 《剑指Offer》面试题-从头到尾打印链表
题目描述: 输入一个链表,从尾到头打印链表每个节点的值. 输入: 每个输入文件仅包含一组测试样例.每一组测试案例包含多行,每行一个大于0的整数,代表一个链表的节点.第一行是链表第一个节点的值,依次类推 ...
- SZU:A66 Plastic Digits
Description There is a company that makes plastic digits which are primarily put on the front door o ...
- Dynamics CRM JS的调试的弊端解决办法
说道CRMJS的调试的博客,之前已经有人写过.很简单,和平常网站JS的调试过程大致相同. 但是Dynamics 中JS调试最麻烦的莫过于出错之后需要修改代码了.因为随着JS代码的修改,伴随着需要保存和 ...
- usaco 1.2.1（指针技巧）
★Milking Cows 挤牛奶 三个农民每天清晨 5 点起床,然后去牛棚给 3 头牛挤奶.第一个农民在 300 时刻(从 5 点开始计时,秒为单位)给他的牛挤奶,一直到 1000 时刻.第二个农民 ...
- Oracle 10g的空间管理
一.表空间(包含表.字段.索引) 1.定义:表空间是一个逻辑概念,实质是组织数据文件的一种途径. 2.创建表空间 --创建表空间 create tablespace myspace datafile ...
- Forms Authentication in ASP.NET MVC 4
原文:Forms Authentication in ASP.NET MVC 4 Contents: Introduction Implement a custom membership provid ...
- Asycn/Await 异步编程初窥（二）
经过总过4天的学习和实践,做完了 WinForm 下 .Net 4.5 的基本异步应用,实现了一个 Http 协议下载的测试程序,为以后使用 .Net 4.5 积累知识和经验.这个小程序完成这样几个作 ...
- 网站部署到Windows Azure Website上
使用CSDN Code将网站部署到Windows Azure Website上 在云计算时代,开发和部署应该是完全统一和集成的.在海外,开发者可以用github来管理他们的代码,并且直接部署到Wind ...
- 使用axis2访问webservice（webserivice基于.net平台实现）
webservice url=http://10.90.11.240:8081/ExceptionWebService.asmx?WSDL: 下载axis2组件,解压,进入bin目录,通过命令wsdl ...