用css实现透视效果
作者:dishuipiaoxiang 来源:Denis'Blog 发布时间:2009-09-05 16:33:00
今天萌发一个想法,用css来实现透视效果。起初,我想到的是我们常见的添加阴影效果的方法,用多个div通过偏移来实现,但这需要很多 div,不够理想。随后,我想到css的一个属性:border,在border相连接处可以产生对角线效果。这样用两个div就可以实现,我们先看看 最终效果:css-perspective-1.html ,然后再分析实现过程。
首先,我们看看border如何生成的对角线效果,在你的html的头部增加以下代码,你就会看到 这样的效果css-perspective.html 。
.border{width:0;height:0;border-width:50px;border-color:#f00 #0f0 #00f #000;border-style:solid;}
有了上面的基础,我们就可以用两个额外的div来实现透视效果。
一、html代码如下:
<div class="perspective-outer">
<div class="perspective-r"></div>
<div class="perspective-b"></div>
<div class="perspective-inner">透视效果元素</div>
</div>
二、Css代码:
.perspective-outer{
position:relative;
width:170px;/*要实现透视效果元素的宽度+透视距离*/
height:140px;/*要实现透视效果元素的高度+透视距离*/
}
.perspective-inner{
border:1px solid #f60;
height:118px;
width:148px;
background-color:#fff;
}
.perspective-r,
.perspective-b{
position:absolute;
width:0;
height:0;
}
.perspective-r{
right:0;
height:100px;/*要实现透视效果元素的高度(120px) - (border-top:20px)*/
border-left:20px solid #000;/*右边透视距离*/
border-top:20px solid #fff;/*下边透视距离*/
}
.perspective-b{
bottom:0;
width:150px;/*最外元素的宽度(170px) - border-left*/
border-left:20px solid #fff;
border-top:20px solid #000;
}
.perspective-outer定义高度和宽度,并相对定位,确保右边和下边的透视区域能定位的相应的位置,高度值和宽度值为要实现透视效果元素的高度加上相应的透视距离。.perspective-r只需设置高度值,其值为.perspective-outer的高度减去border-top,.perspective-b只需设置宽度值,其值为.perspective-outer的宽度减去border-left。.perspective-r的border-top和.perspective-b的border-left的width值决定透视角度。.perspective-r的border-left和.perspective-b的border-top的width值 决定透视距离。其中.perspective-r的border-top和.perspective-b的border-left的color为父元素的背景颜色,我这里的测试页面父元素为body,所以为白色。
三、后记
本文只是做一个简单得测试,其目的在于抛砖引玉。这种方法其实用性究竟有多大,咱姑且不论,但至少可以给我们一种解决问题的思路。希望此文能对你有所帮助。
猜你喜欢
- 问题:1. 访问 ASP 页面时,出现以下错误:Active Server Pages 错误 'ASP 0201'错误无效的
- CSS(叠层样式表)和XSL(可扩展样式语言)都可以定义XML文件的显示,这两种方式有哪些不同以及它们在使用中的具体方法,我们将在本文给予介
- 每个产品诞生的背后都凝结着一位或是多位设计师的心血,在产品的诞生过程中文化、科技、环保、创意等这些方方面面的细节集结成一个绚丽的故事,因为有
- 我有大量的重要数据要从SQL Server导出到Access或Excel文件中去,手工做太麻烦,还有其它的好办法吗?有,我们在 SQL Se
- 我页面上有控制了只能输入数字的控件,禁止了输入法切换的,但是搜狗的云输入却控制不了,有没有办法在页面里面禁止它运行啊?发现这玩意儿真的很讨厌
- asp之家注:asp中FSO组件的功能很强大,如果没有FSO很难想象ASP会变成什么样。对于学习asp编程的朋友一定会接触到FSO相关的操作
- 如果是感应触发.就选onmouseover如果是点击触发.就选onclick [把它们两互相替换,就可随时变为感应
- 1. 停应用层的各种程序。 2. 停oralce的监听进程: $lsnrctl stop 3. 在独占的系统用户下,备份控制文件: SQL&
- 什么是 JScript?JScript 是由微软开发的活动脚本语言,基于 ECMAScript 规范实现。Internet Explorer
- 假设有一个表,结构如下:mysql> CREATE TABLE `a` ( `id
- 额……首先呢说说这个标题吧,实在不知道叫什么好,因为这个demo呢其实一个艾文王今天中午给丢给我一个图。他说这个是一个面试题,给我看看。这样
- 长话短说,看这个 form 元素:<form method="post" action=&qu
- 本文是关于人物角色的一些简单介绍,感谢瑶芝同学提供的大力帮助! 人物角色(Personas)作为一种技术
- 在网上我们常常看见一些注册表单的输入框部分并不是我们常见的矩形框,而是一条细线,很多朋友对此很感兴趣。其实要实现这样的效果并不困难,我们只要
- CSS的学习和其他的学习一样,都需要特定的方法才能比较快的去掌握它.要想掌握CSS, 首先要学会HTML,我刚开始是从零开始学习的
- DBA_2PC_PENDING Oracle会自动处理分布事务,保证分布事务的一致性,所有站点全部提交或全部回滚。一般情况下,处理过程在很短
- 功能是:以一个关键字为索引,搜索整个数据库,然后返回那个关键字所在的表名和列名。(很赞...特别是入侵的时候找不到用户名与密码所在的表的时候
- ASP开发中有用的函数(function)集合,挺有用的,请大家保留!'******************************
- 一个常常令设计师和前端开发人员都头疼的事情就是字体的使用,设计师常常在设计稿中使用某些很漂亮的字体,以实现比较酷炫的界面。但这样常常给编码人
- 八种获取当前日期的js代码,第一步:把如下代码加入<head>区域中:<SCRIPT language=java