html5多重阴影怎么设置,使用CSS3 box-shadow属性实现按钮的多重阴影效果

CSS

语言：

CSSSCSS

确定

html {

font-size: 20px;

box-sizing: border-box;

}

*,

*:before,

*:after {

box-sizing: inherit;

}

body {

background-color: #0fc;

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

height: 100vh;

}

.center {

max-width: 50%;

}

.btn {

border: 5px #4b0082 solid;

color: current;

display: block;

font-family: 'trebuchet ms';

font-size: 2rem;

letter-spacing: 0.1rem;

padding: 1rem;

position: relative;

text-decoration: none;

text-transform: uppercase;

}

.btn::before {

content: "";

background-color: #ff0;

box-shadow: -10px 10px 0 #ff93a6, -20px 20px 0 #0cc;

position: absolute;

left: -0.75rem;

top: 0.5rem;

height: 4.25rem;

width: 102%;

z-index: -1;

-webkit-transition: all 0.2s ease;

transition: all 0.2s ease;

}

.btn:hover::before {

box-shadow: none;

left: 0;

top: 0;

}