来讲讲：CSS复杂实例:用css来完成透视效果
凡是和我讨论客户段效率的全是脑子有问题的，影响的全是图片和FLASH，所以我一直建议一个提交按钮就不要用图片带代替了。网页制造poluoluo文章简介：本文只是做一个复杂得测试，其目标在于举一反三。这类办法实在用性事实有多年夜，咱临时不管，但最少能够给我们一种办理成绩的思绪。但愿此文能对你有所匡助。
用css完成透视效果
明天萌生一个设法，用css来完成透视效果。后来，我想到的是我们罕见的增加暗影效果的办法，用多个div经由过程偏移来完成，但这必要良多div，不敷幻想。随后，我想到css的一个属性：border，在border相毗连处能够发生对角线效果。如许用两个div就能够完成，我们先看看最后的效果，然后再剖析完成历程。
起首，我们看看border怎样天生的对角线效果，在你的html的头部增添以下代码，你就会看到如许的效果。
.border{width:0;height:0;border-width:50px;border-color:#f00#0f0#00f#000;border-style:solid;}
有了下面的基本，我们就能够用两个分外的div来完成透视效果。
1、html代码以下：
<divclass="perspective-outer">
<divclass="perspective-r"></div>
<divclass="perspective-b"></div>
<divclass="perspective-inner">透视效果元素</div>
</div>
2、Css代码：
.perspective-outer{
position:relative;
width:170px;/*要完成透视效果元素的宽度＋透视间隔*/
height:140px;/*要完成透视效果元素的高度＋透视间隔*/
}
.perspective-inner{
border:1pxsolid#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:20pxsolid#000;/*右侧透视间隔*/
border-top:20pxsolid#fff;/*下边透视间隔*/
}
.perspective-b{
bottom:0;
width:150px;/*最外元素的宽度(170px)-border-left*/
border-left:20pxsolid#fff;
border-top:20pxsolid#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，以是为红色。
3、跋文
本文只是做一个复杂得测试，其目标在于举一反三。这类办法实在用性事实有多年夜，咱临时不管，但最少能够给我们一种办理成绩的思绪。但愿此文能对你有所匡助。
原文：http://www.denisdeng.com/?p=474；
</p>
学习这篇入门教程之前，请确定你已经具有了一定的HTML基础。 俗话说：兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中，我们难免会遇到各种各样的问题。 直接用代码建立链接，如：可以直接输入 <a herf = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页 12、插入标签法建立链接，可以再选中文字后在代码中插入html标签，页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。 dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS，三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。 由CS4 版本开始，则转用WebKit 排版引擎（亦即Google Chrome和Apple Safari浏览器所用的排版引擎）作为网页预览。 不管老师做怎样的解释，而我却对它感到很是吃力，诸如里面有许多不知道的功能。 布局表格、绘制层、制作CSS样式表等，这些内容迷糊了我的视线，真是没想到制作一个精巧别致的网页是如此的困难，可是心有不甘。 Dreamweaver在所见即所得添加链接时，可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。
页:
[1]