纯CSS完成的尺寸渐变色、渐远实际效果

2021-01-20 09:30 jianzhan

实际效果图:

实际效果类似也便是上图的这个模样,基础基本原理如图所示:

将全部的盒子都肯定精准定位,随后将宽高各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⑻" />
<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;/* 以便适配IE6 */
}
div.main div.left-top,div.main div.left-top div
{
top:⑸0%;
left:⑸0%;
}
div.main div.right-top,div.main div.right-top div
{
top:⑸0%;
right:⑸0%;
}
div.main div.left-bottom,div.main div.left-bottom div
{
left:⑸0%;
bottom:⑸0%;
}
div.main div.right-bottom,div.main div.right-bottom div
{
right:⑸0%;
bottom:⑸0%;
}
</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下有1个BUG,便是最终的1个盒子的高宽比不可以小于6px,缘故便是:
大伙儿都了解IE6下默认设置的字体样式规格大概在 12 - 14px 之间,当你尝试界定1个高宽比小于这个默认设置值的 div 的情况下, IE 会固执己见的觉得这个层的高宽比不可该小于字体样式的行高。因此即便你用 height: 6px; 来界定了1个 div 的高宽比,具体在 IE 下显示信息的依然是1个 12px 上下高宽比的层。另外一层面,除正中间的那个盒子,别的的盒子全是在其基本之上偏位而来。也便是说,数最多的,大家能够给最终的那个div再加overflow:hidden;(由于大家给任何1个div再加overflow:hidden;以后,它将不在会有子级偏位出来)这样的话最终的那个div的最少高宽比应当在6px上下(假定IE6给盒子设的默认设置高宽比是12px;)那样的话才不至于它的父级必须overflow:hidden;。