css 两边到中间渐变_纯CSS实现的大小渐变、渐远效果

效果图：

效果差不多也就是上图的这个样子，基本原理如图所示：

将所有的盒子都绝对定位，然后将宽高各50%的递缩小，并且在top、right、bottom和left针对性的偏移即可，代码如下：

复制代码代码如下:

CSS to achieve the visual effect and further away[既是安安]

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:-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%;

}

这个方法在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;。

css 两边到中间渐变_纯CSS实现的大小渐变、渐远效果相关推荐

纯css导航下拉_纯CSS标签导航
纯css导航下拉 The appearence of "tab" navigation is relatively easy to create, but making a tab ...
css加号图标_纯CSS制作各种各样的网页图标（三角形、暂停按钮、下载箭头、加号等）...
三角形 .box{ width: 0; height: 0; border-top: 50px solid transparent; border-bottom: 50px solid transpa ...
css 实现一个尖角_纯 CSS 实现三角形尖角箭头的实例
上次无意中发现了个使用纯 CSS 实现三角形尖角箭头的方法 ,但没有怎么用上,也没有详细完整的实例,今天刚好要用上,整理了下,写个完整的代码: 无标题文档 .area { margin:100px a ...
css3波浪纹路_纯 CSS 实现波浪效果！
一直以来,使用纯 CSS 实现波浪效果都是十分困难的. 因为实现波浪的曲线需要借助贝塞尔曲线. 而使用纯 CSS 的方式,实现贝塞尔曲线,额,暂时是没有很好的方法. 当然,借助其他力量(SVG.CAN ...
php垂直居中代码_纯css实现水平和垂直居中
有时候我们需要实现一个水平居中和垂直居中的效果.例如你想做一个网页版的PPT,你希望演示的内容区域总是居中.这里介绍一个纯css实现. 水平和垂直居中 body {JQUERY的Deferred应用 ...
css空心三角形_纯CSS制作空心三角形和实心三角形及其实现原理
纯CSS制作空心三角形和实心三角形及其实现原理在一次项目中需要使用到空心三角形,我瞬间懵逼了.查阅了一些资料加上自己的分析思考,终于是达到了效果,个人感觉制作三角形是使用频率很高的,因此记录下来,供 ...
gradient设置上下渐变_图解CSS: CSS渐变
CSS的渐变主要分布在 conic-gradient()和repeating-conic-gradient()两个属性.在CSS中,CSS的渐变相当于图像,我们可以使用线性渐变(linear-grad ...
Java制作二级导航菜单_纯CSS实现超简单的二级下拉导航菜单代码
本文实例讲述了纯CSS实现超简单的二级下拉导航菜单代码.分享给大家供大家参考.具体如下: 这是一款纯CSS菜单,二级下拉导航效果,是最简洁的CSS导航菜单,兼容性也很棒,IE7/8.火狐等都支持,而且 ...
java实现星级评分功能_纯CSS的星级评价效果
前言这种星星评价效果,相信大家这个并不陌生,经常会遇到这个.现在如果要我们自己实现一个,很多人第一反应可能用JS+CSS去实现它.这种方式并没有什么不好的地方,只是我们在复用的时候不是很方便,需要带 ...

css 两边到中间渐变_纯CSS实现的大小渐变、渐远效果

css 两边到中间渐变_纯CSS实现的大小渐变、渐远效果相关推荐

最新文章

热门文章

css 两边到中间 渐变_纯CSS实现的大小渐变、渐远效果

css 两边到中间 渐变_纯CSS实现的大小渐变、渐远效果相关推荐

最新文章

热门文章

css 两边到中间渐变_纯CSS实现的大小渐变、渐远效果

css 两边到中间渐变_纯CSS实现的大小渐变、渐远效果相关推荐