今天小编跟大家讲解下有关纯CSS实现的大小渐变、渐远效果 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关纯CSS实现的大小渐变、渐远效果 的相关资料，希望小伙伴们看了有所帮助。
效果图：
效果差不多也就是上图的这个样子 基本原理如图所示：
将所有的盒子都绝对定位 然后将宽高各50%的递缩小 并且在top、right、bottom和left针对性的偏移即可 代码如下：复制代码代码如下:<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type"content="text/html; charset=utf-8"/> <title>CSS to achieve the visual effect and further away[既是安安]</title> <link rel="stylesheet"rev="stylesheet"type="text/css"href="http://www.jsann.com/framework/reset.css"/> <style type="text/css"> div { background-color:#a40000; position:absolute; } div.main { width:100px; height:100px; top:50%; left:50%; } div.main div { width:50%; height:50%; } div.main div div div div { overflow:hidden; } div.main div.left-top,div.main div.left-top div { top:-50%; left:-50%; } div.main div.right-top,div.main div.right-top div { top:-50%; right:-50%; } div.main div.left-bottom,div.main div.left-bottom div { left:-50%; bottom:-50%; } div.main div.right-bottom,div.main div.right-bottom div { right:-50%; bottom:-50%; } </style> </head> <body> <div class="main"> <div class="left-top"><div><div><div></div></div></div></div> <div class="right-top"><div><div><div></div></div></div></div> <div class="left-bottom"><div><div><div></div></div></div></div> <div class="right-bottom"><div><div><div></div></div></div></div> </div> </body> </html>
这个方法在IE6下有一个BUG 就是最后的一个盒子的高度不能小于6px 原因就是： 大家都知道IE6下默认的字体尺寸大致在 12 - 14px 之间 当你试图定义一个高度小于这个默认值的 div 的时候 IE 会固执的认为这个层的高度不应该小于字体的行高。所以即使你用 height: 6px; 来定义了一个 div 的高度 实际在 IE 下显示的仍然是一个 12px 左右高度的层。另一方面 除了中间的那个盒子 其他的盒子都是在其基础之上偏移而来。也就是说 最多的 我们可以给最后的那个div加上overflow:hidden;（因为我们给任何一个div加上overflow:hidden;之后 它将不在会有子级偏移出来）这样的话最后的那个div的最小高度应该在6px左右（假设IE6给盒子设的默认高度是12px；）那样的话才不至于它的父级需要overflow:hidden;。
来源：爱蒂网
