html制作3d按钮,html – 带角度角的3D CSS按钮

实现这一目标的简单方法是应用多个框阴影：

a{

background: #ccc;

display: block;

box-shadow: #000 1px 1px 0,

#000 2px 2px 0,

#000 3px 3px 0,

#000 4px 4px 0,

#000 5px 5px 0,

#000 6px 6px 0,

#000 7px 7px 0,

#000 8px 8px 0;

}

另一种方法,使用伪元素的偏斜：

a{

background: #ccc;

display: block;

position: relative;

}

b::before, b::after{

content: '';

position: absolute;

top: 5px; /* half of the shadow width */

right: -10px; /* negative shadow width */

width: 10px;

height: 100%;

background: #000;

transform: skewY(45deg);

}

b::after{

height: 10px;

width: 100%;

bottom: -10px; /* negative shadow height */

left: 5px; /* half of the shadow height */

top: auto;

right: auto;

transform: skewX(45deg);

}