background删除后，会出现这样的效果，求解答为何

源自：7-7 CSS3选择器 ::before和::after

<!DOCTYPE html>

<html>

<head>

<title>before、after</title>

<style>

.box h3{

text-align:center;

position:relative;

top:80px;

}

.box {

width:70%;

height:200px;

margin:40px auto;

}

.effect{

position:relative;

-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;

-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;

box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;

}

.effect::before, .effect::after{

content:"";

position:absolute;

z-index:-1;

-webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);

-moz-box-shadow:0 0 20px rgba(0,0,0,0.8);

box-shadow:0 0 20px rgba(0,0,0,0.8);

top:50%;

bottom:0;

left:10px;

right:10px;

-moz-border-radius:100px / 10px;

border-radius:100px / 10px;

}

</style>

</head>

<body>

<h3>Shadow Effect </h3>

</div>

</body>

</html>

提问者：涛崽子 2016-03-18 01:05