多边框

Html Css

 元素必须是相对定位,且具有足够的padding来显示多余的边框:

 

#borders {

   position:relative;

   z-index:1;

   padding:30px;

   border:5px solid #f00;

   background:#ff9600;

}

#borders:before {

   content:"";

   position:absolute;

   z-index:-1;

   top:5px;

   left:5px;

   right:5px;

   bottom:5px;

   border:5px solid #ffea00;

   background:#4aa929;

}

 

#borders:after {

   content:"";

   position:absolute;

   z-index:-1;

   top:15px;

   left:15px;

   right:15px;

   bottom:15px;

   border:5px solid #00b4ff;

   background:#fff;

}

相关内容推荐

JQ特效之:页面向上滚动时弹出模块

页面向上滚动弹出模块这个特效比较适合资源类网站,用户来到你的网站后一般动作就算向下翻页找,找着找着发现没找到,一般会回到顶部去找导航栏之类的,这个时候就会产生一个

返回
顶部