css3制作八棱锥_CSS3实现超立体感效果

CSS3实现立体阴影效果 ，主要是利用伪类属性 加上定位 以及transform动画的skew(倾斜)和rotate(旋转)属性加上box-shadow(阴影)属性来实现的~~

yefengs.com

代码如下~~

DIV 的结构~~主要是 boxshadow 了~~

这是演示~~yefengs.com

折腾屋

CSS样式

#outcontenbox{

width: 400px;

height: 400px;

display: block;

background: rgba(226, 226, 226, 0.04);

margin: 20px auto;

padding-top: 30px;

z-index: 2;

position: relative;

}

#intbox{

/*基础样式*/

display: block;

margin: 10px auto;

width: 150px;

height: 150px;

background-color: #FFF;

padding: 5px 5px 30px 5px;

border: 1px solid #C7C3C1;

}

.boxshadow{

/*定位，相对定位*/

position: relative;

}

.boxshadow:before,.boxshadow:after {

/*影子 主要用了伪类*