首页 > 其他 > 详细

一个div 实现六个矩形

时间:2016-01-12 15:04:29      阅读:211      评论:0      收藏:0      [点我收藏+]
		div{
			display: block;
		}
			div {
            width: 100px;
            height: 100px;
            border:  1px solid red;
            position: relative;
            -webkit-box-reflect: below 20px -webkit-gradient(linear, 0% 100%,100% 100%, from(rgba(255,255,255,1)), to(white));
        }
        div:before ,div:after{
            content: ‘‘;
            width: 100px;
            height: 100px;
            position: absolute;
            border:  1px solid red;
            left: 120px;
            -webkit-box-reflect: right 20px -webkit-gradient(linear, 0% 100%,100% 100%, from(rgba(255,255,255,1)), to(white));
        }
        div:after {
            top: 120px;
        }

  

<div id="">
			
</div>

  实现后的效果技术分享

 

 

  注:-box-reflect,css3的属性。chrome,safari 兼容

一个div 实现六个矩形

原文:http://www.cnblogs.com/jiaweniv/p/5124305.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!